属性和含义和用法(props)
三种赋值方法
1.
var style = {
color: "red",
border: "1px solid #000",
};
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
}
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange}/>
</div>
}
});
ReactDOM.render(
<div style={style}><HelloUniverse></HelloUniverse></div>
, document.body)
2.
var style = {
color: "red",
border: "1px solid #000",
};
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name1 + ' ' + this.props.name2}</p>;
}
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {
name1: 'Tim',
name2: 'John'
};
},
handleChange: function (event) {
this.setState({name1: event.target.value});
},
render: function () {
return <div>
<HelloWorld {...this.state}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange}/>
</div>
}
});
ReactDOM.render(
<div style={style}><HelloUniverse></HelloUniverse></div>
, document.body)
3.setProps形式:通过组件更新属性,不能在组件内部中修改属性的,因为会违背组件设计原则(尽量避免)
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name}</p>
}
});
var instance = ReactDOM.render(<HelloWorld></HelloWorld>, document.body);
instance.setProps({name: 'wilcohuang'});
状态的含义和用法(state)
- getInitialState: 初始化每个实例特有和居状态
- setState: 更新组件状态,setState->diff算法->(如果有变化)->更新DOM
属性和状态对比
相同点:
- 都是纯JS对象
- 都会触发render更新
- 都具有确定性
- | 属性 | 状态 |
---|---|---|
能否从父组件获取初始值 | yes | no |
能否由父组件修改 | yes | no |
能否在组件内部设置默认值 | yes | yes |
能否在组件内部修改 | no | yes |
能否设置子组件的初始值 | yes | no |
能否修改子组件的值 | yes | no |
组件在运行时需要修改的数据就要状态。
属性和状态实战
- 分析构成项目的组件
- 分析组件的关系及数据传递
- 实际编写代码
var Content = React.createClass({
render: function () {
return <p>{this.props.selectName}</p>;
},
});
var Comment = React.createClass({
getInitialState: function () {
return {
names: ['Tim', 'John', 'Hank'],
selectName: '',
};
},
handleSelect: function () {
this.setState({selectName: event.target.value});
},
render: function () {
var options = [];
for (var option in this.state.names) {
options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>);
}
return <div>
<select onChange={this.handleSelect}>
{options}
</select>
<Content selectName={this.state.selectName}></Content>
</div>;
},
});
ReactDOM.render(<Comment></Comment>, document.body);
var Content = React.createClass({
getInitialState: function () {
return {
// text: "reply To: " + this.props.selectName, //写在这里是错误的,getInitialState相当于构造函数,如果selectName改变,这里不能更新
inputText: "",
};
},
handleChange: function (event) {
this.setState({inputText: event.target.value});
},
handleSubmit: function () {
console.log('reply to ' + this.props.selectName + "\n" + this.state.inputText);
},
render: function () {
return <div>
<textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
<button onClick={this.handleSubmit}>submit</button>
</div>;
},
});
var Comment = React.createClass({
getInitialState: function () {
return {
names: ['Tim', 'John', 'Hank'],
selectName: '',
};
},
handleSelect: function () {
this.setState({selectName: event.target.value});
},
render: function () {
var options = [];
for (var option in this.state.names) {
options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>);
}
return <div>
<select onChange={this.handleSelect}>
{options}
</select>
<Content selectName={this.state.selectName}></Content>
</div>;
},
});
ReactDOM.render(<Comment></Comment>, document.body);