React Study Note3

属性props

可以向使用html的attr一样使用属性，就像下面img的src一样

let name = 'hi'

ReactDOM.render((
  <div>
    <img src="1.png"/>
  </div>
), document.getElementById('root'))`

如果需要传递动态属性，使用{}，多个属性，使用展开运算符

let props = {
    src: '1.png',
    alt: '1图片'
}

ReactDOM.render((
  <div>
    <img src={"1.png"}/>
    <img {...props}/>
  </div>
), document.getElementById('root'))

两个转换,class–>className for–>htmlFor

因为class和for是javascript关键字，所以这里需要用转换之后名称

ReactDOM.render((
  <div className="tab">
    <label htmlFor="name">姓名:</label><input id="name"/>
  </div>
), document.getElementById('root'))

布尔属性

如果一个属性的值是布尔值，当这个值是true的时候则可以省略=后面的值，只保留key。

ReactDOM.render((
  <div className="tab">
    <input type="text" required/>
    <input type="text" required={true}/>
  </div>
), document.getElementById('root'))

原生元素的自定义属性

react对元素属性做了校验，如果在原生属性上使用此元素不支持的属性，则不能编译成功。必须使用data-前缀

ReactDOM.render((
  <div className="tab">
    <input type="text" data-init="22"/>
  </div>
), document.getElementById('root'))