我在页面上有一个组件(搜索字段)的两个实例,它们之间有第二个组件(一个发出服务器调用的按钮),如下所示：
ReactDOM.render(
<table>
<tbody>
<tr>
<td><CardSearch items={ cards } placeholder="Card 1 here" /></td>
<td><RunOnServer url="py/comparecards" /></td>
<td><CardSearch items={ cards } placeholder="Card 2 here"/></td>
</tr>
</tbody>
</table>,document.getElementById('root')
);
我想要做的就是将每个未经修改的参数从CardSearch字段传递给RunOnServer按钮,但如果这很简单,我会被诅咒. According to this我可以使用this.state.var作为道具,但是当编译代码时,这样做会给我’undefined.state.var’. React’s official docs不是很好;他们只是告诉我自己去Flux,这看起来很糟糕……我不需要一个全新的架构来将一个简单的变量从一个组件传递到另一个组件.
我也尝试在正在进行渲染的文件中创建局部变量,但是它们作为道具传递给组件,并且您无法修改组件中的道具.
解决方法
我创建了一个
jsfiddle,其中包含如何使用父组件在两个组件之间共享变量的示例.
var Parent = React.createClass({
getinitialState: function(){
return {shared_var: "init"};
},updateShared: function(shared_value){
this.setState({shared_var: shared_value})
},render: function() {
return (<div>
<CardSearch shared_var={this.state.shared_var} updateShared={this.updateShared} />
<RunOnServer shared_var={this.state.shared_var} updateShared={this.updateShared} />
<div> The shared value is {this.state.shared_var} </div>
</div>);
}
});
var CardSearch = React.createClass({
updateShared: function(){
this.props.updateShared('card');
},render: function() {
return (<button onClick={this.updateShared} style={this.props.shared_var == 'card' ? {backgroundColor: "green"} : null} >
card
</button>);
}
});
var RunOnServer = React.createClass({
updateShared: function(){
this.props.updateShared('run');
},render: function() {
return (<button onClick={this.updateShared} style={this.props.shared_var == 'run' ? {backgroundColor: "green"} : null}>
run
</button>);
}
});
ReactDOM.render(
<Parent/>,document.getElementById('container')
);