我正在用ReactJS构建一个电子电阻计算器.我有一个声明如此的组合组件：
var ResistanceCalculator = React.createClass({
getInitialState: function() {
return {bands: [0,0]}
},componentDidMount: function() {
console.log(this.props.children); // => undefined
},render: function() {
return (
<div>
<OhmageIndicator bands={this.state.bands} />
<SVGResistor bands={this.state.bands} />
<BandSelector band={1} />
<BandSelector band={2} />
<BandSelector band={3} />
<BandSelector band={4} />
<BandSelector band={5} />
</div>
);
}
});
BandSelector渲染< select>元素和当一个更改我想更新ResistanceCalculator的状态.所以我的想法是我需要将一个事件监听器绑定到ResistanceCalculator子节点.然而this.props.children似乎是空的.为什么是这样？
解决方法
经验法则是：this.props中的所有内容都从父级传递给您.
所以你以错误的方式使用this.props.children.如果我有这样的事情：
所以你以错误的方式使用this.props.children.如果我有这样的事情：
<Todos><div /><div /></Todos>
那么,对于Todos组件,this.props.children将是div的数组.
你想要的是简单的回调(working example)：
/** @jsx React.DOM */
var ResistanceCalculator = React.createClass({
getInitialState: function() {
return {bands: [0,0]};
},handleBandSelectionChange: function(bandIndex,newValue) {
// for the sake of immutability,clone the array here
var bands = this.state.bands.slice(0);
bands[bandIndex] = newValue;
console.log(bandIndex,newValue); // yep,seems to work
this.setState({bands: bands});
},render: function() {
return (
<div>
<OhmageIndicator bands={this.state.bands} />
{
this.state.bands.map(function(value,i) {
return (
<BandSelector band={i} onChange={this.handleBandSelectionChange}/>
);
},this)
}
</div>
);
}
});
var BandSelector = React.createClass({
handleChange: function(e) {
if (this.props.onChange)
this.props.onChange(this.props.band,e.target.value);
},render: function() {
return (
<select onChange={this.handleChange}>
<option value="1">1</option>
<option value="2">2</option>
</select>
);
}
});
我从select中听到常规的onChange事件,然后在处理程序中调用我父的处理程序(handleBandSelectionChange).请注意,对于父级(ResistanceCalculator),事件不必是onChange;它可以是任何名称,只要孩子称之为.将它命名为“更改”会更好.
作为旁注,this.props.children用于包装组件,这些组件希望在自己完成某些工作时透明地呈现其内容.
