react属性绑定

最新推荐文章于 2023-06-18 10:04:49 发布

转载最新推荐文章于 2023-06-18 10:04:49 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luguankun/p/10281395.html

文章标签：

#javascript #ViewUI

本文介绍了在ReactJS中如何正确地进行属性值绑定、class绑定、label绑定以及行内样式的绑定。通过实例展示了如何避免使用引号绑定state数据、如何使用className代替class、如何在label中使用htmlFor代替for以及如何正确绑定行内样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.属性值绑定state里的数据，不用引号

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      title:"提示文字"
    }
  }
  render() {
    return (
      <div>
        {/* 属性值不用双引号 */}
        <div title={this.state.title}>test</div>
      </div>
    );
  }
}

2.class的绑定用className

  render() {
    return (
      <div>
        {/* className绑定类名 */}
        <div className="red">文字</div>
      </div>
    );
  }

3.label中使用for的时候，要改成Htmlfor

  render() {
    return (
      <div>
        {/* 使用htmlFor代替for */}
        <label htmlFor="name">姓名：</label>
        <input type="text" id="name"/>
      </div>
    );
  }

4.绑定行内样式,绑定行内样式，需要两个大括号

class App extends Component{
  render(){
    return(
      <div>
        <div className="test" style={{"margin":"0 auto"}}>
          
        </div>
      </div>
    )
  }
}

转载于:https://www.cnblogs.com/luguankun/p/10281395.html