React：为什么`this.props.children`未定义？ [英] React: Why is `this.props.children` undefined?

问题描述

我正在使用ReactJS构建电子电阻计算器。我有一个声明如此的组合组件：

I'm building an electronic resistance calculator with ReactJS. I have a composed component declared as so:

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 children。但是 this.props.children 似乎是空的。这是为什么？

BandSelector renders <select> elements and when one changes I want to update ResistanceCalculator's state. So my thinking was that I need to bind an event listener to ResistanceCalculator children. However this.props.children seems to be empty. Why is this?

推荐答案

经验法则是： this.props 从父母传递给你。
所以你使用 this.props.children 错误的方法。如果我有这样的事情：

The rule of thumb is: everything that's in this.props is passed down to you from the parent. So you're using this.props.children the wrong way. If I had something like this:

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

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

then, for the Todos component, this.props.children would be the array of divs.

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

What you want here are simple callbacks (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>
    );
  }
});

我听从常规的 onChange 事件选择，然后在处理程序中我调用我父的处理程序（ handleBandSelectionChange ）。请注意，对于父级（ ResistanceCalculator ），事件不必是 onChange ;它可以是任何名称，只要孩子称之为。命名它更好 onChange 。

I listen to the regular onChange event from select, then in the handler I call my parent's handler (handleBandSelectionChange). Note that, for the parent (ResistanceCalculator), the event doesn't have to be onChange; it could be any name, as long as the child calls it. It's just nicer to name it onChange.

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

As a side note, this.props.children is used for wrapper components who want to transparently render their content while doing some work themselves.

这篇关于React：为什么`this.props.children`未定义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！