标签：必须 color 绑定 button data 赋值 驼峰命名 document react
特点：
1/react事件，绑定事件的命名，驼峰命名法。
2/{},传入1个函数，而不是字符串
<button onClick={this.sendData}>传递helloworld给父元素</button>
事件对象：React返回的事件对象是代理的原生的事件对象，如果想要查看事件对象的具体值，必须之间输出事件对象的属性。
注意：
原生，阻止默认行为时，可以直接返回return false；
React中，阻止默认必须e.preventDefault();
React事件传参数
{/* 使用ES6箭头函数传递多个参数 */}
<button onClick={(e)=>{this.parentEvent1(‘msg:helloworld‘,e)}}>提交</button>
{/* //不使用ES6箭头函数传递多个参数的方式 */}
<button onClick={function(e){this.parentEvent1(‘不使用es6,msg:helloworld‘,e)}.bind(this)}>提交</button>
React中条件渲染即和JavaScript中，条件运算，如if...else...三元运算符等。
1/直接通过条件运算返回要渲染的JSX对象
2/通过条件运算得出jsx对象，在将JSX对象渲染到模板中。
//条件渲染一 function Login() { return ( <div> <h1>欢迎登录</h1> </div> ) } function LoginNeed() { return ( <div> <h1>请先登录</h1> </div> ) } class HelloWorld extends React.Component{ constructor(props) { super(props) this.state = { isLogin:false } } render() { if(this.state.isLogin){ return( <Login /> ) }else{ return ( <LoginNeed /> ) } } } ReactDOM.render( <HelloWorld />, document.querySelector(‘#root‘) )
function Login() { return ( <div> <h1>欢迎登录</h1> </div> ) } function LoginNeed() { return ( <div> <h1>请先登录</h1> </div> ) } class HelloWorld extends React.Component{ constructor(props) { super(props) this.state = { isLogin:true } } render() { let element = null if(this.state.isLogin){ element = <Login /> }else{ element = <LoginNeed /> } return ( <div> {element} </div> ) } } ReactDOM.render( <HelloWorld />, document.querySelector(‘#root‘) )
案例一直接根据判断条件进行return，这样耦合性太强，而且很难增加新功能，
使用案例二这种将函数赋值给元素，大大提升了代码的复用性，而且可拓展能力加强
标签：必须 color 绑定 button data 赋值 驼峰命名 document react
原文地址：https://www.cnblogs.com/asdaa/p/12393001.html
