react语法注意事项

组件：

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的保留字。

获取真实的DOM节点

　　使用ref属性来获取真实的DOM节点:　　

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />

        <input type="button" value="Focus the text input" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

PS: 给两个元素设置了相同的ref ，只有最后一个才能成功获取（相当于给元素设置了ID）

this.state

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 ? 'like' : 'haven\'t liked';

    return (

      <p onClick={this.handleClick}>

        You {text} this. Click to toggle.

      </p>

    );

  }

});

ReactDOM.render(

  <LikeButton />,

  document.getElementById('example')

);

　　getInitialState方法用于定义初始状态，也就是一个对象，这个对象可能通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改后，自动调用this.render方法，再次渲染组件。

　　由于this.props 和 this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示那些一旦定义，就不用改变的特性，而this.state是会随着用户互动而产生变化的特性。

表单

表单输入值，不能用this.props读取

var Input = React.createClass({

  getInitialState: function() {

    return {value: 'Hello!'};

  },

  handleChange: function(event) {

    this.setState({value: event.target.value});

  },

  render: function () {

    var value = this.state.value;

    return (

      <div>

        <input type="text" value={value} onChange={this.handleChange} />

        <p>{value}</p>

      </div>

    );

  }

});

ReactDOM.render(<Input/>, document.body);

　　上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

巴特西

react语法注意事项

最新文章

热门文章