React.JS 组件

组件使应用更容易管理。

实例:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>; 
  }
}); 
ReactDOM.render(
  <HelloMessage />, 
  document.getElementById('example')
);

运行案例

说明:React.createClass 方法用于生成一个组件类 HelloMessage。

<HelloMessage /> 实例组件类并输出信息。

注:原生的HTML元素以小写字母开头,自定义的React类名以大写字母开头。组件类只能包含一个顶层标签。

如果需要向组件传递参数,可以使用this.props对象。

实例:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>; 
   }
}); 
ReactDOM.render(
  <HelloMessage name="coding" />,  
  document.getElementById('example')
);

运行案例

说明:name属性通过this.props.name来获取。

复合组件

可以通过创建多个组件来合成一个组件,也就是说把组件的不能功能点分离开。

实例:

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>
    );
  }
}); 
ReactDOM.render(
  <WebSite name="慕课网" site=" http://www.imooc.com" />,
  document.getElementById('example')
);

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信