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绑定属性的主要内容,如果未能解决你的问题,请参考以下文章

「首席架构师推荐」React生态系统大集合

import * as react from 'react' 与 import react from 'react' 有啥区别

“使用 JSX 时,React 必须在范围内”(react/react-in-jsx-scope 与 index.js 上的“window.React = React”)

React 系列教程

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

react 导入中的 as