如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="柠檬先生" />, document.getElementById('example') ); </script> </body>
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:
<body> <div id="example"></div> <script type="text/babel"> var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); React.render( <WebSite name="柠檬先生" site=" http://www.baidu.com" />, document.getElementById('example') ); </script> </body>
React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。
当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
<body> <div id="example"></div> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') ); </script> </body>
React Props
使用 Props
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="柠檬先生" />, document.getElementById('example') ); </script> </body>
默认 Props
你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ getDefaultProps: function() { return { name: '柠檬先生' }; }, render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); </script> </body>