react语法注意事项

Posted 2020-09-17 沐浴点阳光

组件：

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

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById(‘example‘)
);

　　变量HelloMessage是一个组件类，模板插入<HelloMessage />时，会自动生成HelloMessage 的一个实例。注：所有组件类都必须有自己的render方法，用于输出组件。

　　PS： 组件烦的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错

var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

　　上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p

　　组件的用法与原生的html标签完全一致，可以任意加入属性，比如<HelloMessage name="John" />，就是HelloMessage组件加入一个name属性，值为“John”。组件的属性可以在组件类的this.props对象上获取，比如name 属性就是可能通过this.props.name读取。

　　this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。它表示组件的所有子节点。

　　

var NotesList = React.createClass({
   render: function(){
       return(
           <ol>
               {
                   React.Children.map(this.props.children,function(child){
                       return <li>{child}</li>
                    })
               }
            </ol>
        ) ;
   }  
});

ReactDOM.render(
   <NotesList>
      <span>hello</span>
      <span>world</span>  
   </NotesList>,
   document.body   
)

　　上面的代码的NoteList组件有两个span子节点，它们都可以通过this.props.children读取，运行结果如下。

　　这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

　　React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

 

　　添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成hrmlFor，这是因为class和for是javascript的保留字。