React中style的使用及注意事项(推荐)

目录

• React中style的使用注意事项
• 补充：React 组件的 style 样式使用相关问题

React中style的使用注意事项

    React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style="opacity:{this.state.opacity};"这种写法，第二如果设置多个style格式如下，多个style中间使用逗号分割。

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

但是在html中我们通常直接使用，多个style中间使用分号;

   white text2

           nihao

代码示例给出一个表格中文本的颜色和文本框背景颜色的示例：

最终效果图如下：

补充：React 组件的 style 样式使用相关问题

组件名内不能使用 style 样式，例如：假设该组建名为 ，如果我们写成： 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：

function HelloMessage(props) {
    return 
Hello World！
;
}

或者

var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
    render() {
        return 
Hello World！
;
    }
}

到此这篇关于React中style的使用注意事项的文章就介绍到这了,更多相关React中style使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！