react学习笔记-02

时间：2022-07-25 20:13:51

1.组件嵌套

React允许将代码封装成一个component，然后像html标签一样，插入网页中中。

 var HelloMessage = React.createClass({
         render: function() {
           return <h1>Hello {this.props.name}</h1>;
         }
       });
 6 var ParentContainer = React.createClass({
     　　render: function() {
           return (
             <div>
               <HelloMessage name={this.props.name} />
               <HelloMessage name={this.props.name} />
             </div>
             );
         }
       });

  ReactDOM.render(
         <ParentContainer className="className" name="bella" />,
         document.getElementById('example')
       );

组件嵌套注意规则：

　　首字母要大写，否则会报错；

　　组件类只能包含一个顶层标签，否则会报错

　　class属性需要写成className（因为jsx兼容Js语法，所以在模板中不要写js关键字）

　　for要用htmlFor（道理同上）

2.组件通信

　　要了解组件通信，首先得了解props和state两个属性.

　　　　1.props一般是不可变的，state是可变的

　　　　2.子组件间通过Props进行数据传递，this.props就是调用该组件传来的属性

　　　　3.state可以根据与用户交互来改变。

　　因此我们可以在父组件中设置state，通过props将state值传递给子组件，这种方式就实现了父组件-子组件之间的通信

这是菜鸟教程上的一个demo:

       return {
       name: "菜鸟教程",
       site: "http://www.runoob.com"
     };
   },

   render: function() {
     return (
       <div>
         <Name name={this.state.name} />
         <Link site={this.state.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 />,
   document.getElementById('example')
 );

　　

相关文章