React --react绑定属性
Posted juewuzhe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React --react绑定属性相关的知识,希望对你有一定的参考价值。
react绑定属性
/* react绑定属性注意: class要换成className for要换成 htmlFor style: <div style={{"color":‘red‘}}>我是一个红的的 div 行内样式</div> 其他的属性和以前写法是一样的 */
//组件名称首字母大写、组件类名称首字母大写
class Home extends React.Component{
// 子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象 constructor(props){ super(props); //固定写法 this.state={ msg:‘我是一个home组件‘, title:‘我是一个title‘, color:‘red‘, style:{ color:‘red‘, fontSize:‘40px‘ } } } render(){ return( <div> //所有的模板要被一个根节点div包含起来 <h2>{this.state.msg}</h2> <div title="1111">我是一个div</div> <br /> <div title={this.state.title}>我是一个div</div> <br /> <div id="box" className=‘red‘>我是一个红的的div---id</div> <br /> <div className={this.state.color}>我是一个红的的div 1111</div> <br /> <label htmlFor="name">姓名</label> <input id="name" /> <br /> <br /> <div style={{"color":‘red‘}}>我是一个红的的 div 行内样式</div> <br /> <br /> <div style={this.state.style}>我是一个红的的 div 行内样式</div> </div> ) } } export default Home;
以上是关于React --react绑定属性的主要内容,如果未能解决你的问题,请参考以下文章
import * as react from 'react' 与 import react from 'react' 有啥区别
“使用 JSX 时,React 必须在范围内”(react/react-in-jsx-scope 与 index.js 上的“window.React = React”)