javascript – React:为什么`this.props.children`未定义?

我正在用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.如果我有这样的事情:
<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用于包装组件,这些组件希望在自己完成某些工作时透明地呈现其内容.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)