8

我正在用 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的状态。所以我的想法是我需要将一个事件监听器绑定到ResistanceCalculator孩子。然而this.props.children似乎是空的。为什么是这样？

4

1 回答 1

13

经验法则是：里面的一切都是this.props从父母那里传给你的。所以你用this.props.children错了方法。如果我有这样的事情：

<Todos><div /><div /></Todos>

然后，对于Todos组件，this.props.children将是divs.

您在这里想要的是简单的回调（工作示例）：

/** @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; 它可以是任何名字，只要孩子叫它。只是更好地命名它onChange。

作为旁注，this.props.children用于希望透明地呈现其内容同时自己做一些工作的包装器组件。

于 2014-01-03T08:46:52.717 回答