您的位置：首页 > Web前端 > React

react语法注意事项

2017-05-11 10:30 281 查看

组件：

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

和

　　组件的用法与原生的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

元素都属于这种情况，更多介绍请参考官方文档。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航