作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在使用 ReactJS 构建电子电阻计算器。我有一个这样声明的组合组件:
var ResistanceCalculator = React.createClass({
getInitialState: function() {
return {bands: [0,0,0,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
的状态。所以我的想法是我需要将事件监听器绑定(bind)到 ResistanceCalculator
children 。然而this.props.children
似乎是空的。这是为什么?
最佳答案
经验法则是:this.props
中的所有内容都是从父级传递给您的。所以你使用 this.props.children
的方式不对。如果我有这样的东西:
<Todos><div /><div /></Todos>
然后,对于 Todos
组件,this.props.children
将是 divs
的数组。
你想要的是简单的回调(working example):
/** @jsx React.DOM */
var ResistanceCalculator = React.createClass({
getInitialState: function() {
return {bands: [0,0,0,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
;它可以是任何名字,只要 child 叫它。将它命名为 onChange
会更好一些。
作为旁注,this.props.children
用于包装器组件,这些组件希望在自己完成一些工作的同时透明地呈现其内容。
关于javascript - react : Why is `this.props.children` undefined?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20898401/
我是一名优秀的程序员,十分优秀!