Reactjs 反应：访问findDOMNode抛出错误的子元素

我有一个

容器

组件，它有几个孩子

在

componentdiddupdate

上，我想更改样式属性

看起来容器应该能够处理这个问题，而不是每个子容器自己处理

问题，react在尝试获取子节点的Dom节点时抛出错误

  var childA = this.props.children[0];
  React.findDOMNode(childA);
  => Uncaught Error: Invariant Violation: Element appears to be neither ReactComponent nor DOMNode (keys: )

---

编辑：那^^^^是错误的写作方式

如果你的孩子需要做一些事情，你应该试着从最高层传下来

假设你有3种颜色：

绿色、红色、蓝色

，你想让你的孩子用这种颜色，但也许他们经常改变顺序。传下去

Parent = React.createClass({
  renderChildren: function(){
    var colors = ["red", "blue", "green"]

    return React.Children.map(this.props,children, function(child, index){
      // this returns a legit clone, adding one extra prop. 
      return React.cloneElement(child, {color: colors[index]});
    })
  },

  render: function(){
    return (
      <div>{this.renderChildren()}</div>
    )
  }
})

Child = React.createClass({
  render: function(){
    return (<div style={{background: this.props.color}}>{'YOLO'}</div>)
  }
})

Parent=React.createClass({
renderChildren:function（）{
变量颜色=[“红色”、“蓝色”、“绿色”]
返回React.Children.map（this.props，Children，function（child，index）{
//这将返回一个合法克隆，添加一个额外道具。
返回React.cloneElement（子元素，{color:colors[index]}）；
})
},
render:function（）{
返回(
{this.renderChildren（）}
)
}
})
Child=React.createClass({
render:function（）{
返回（{'YOLO'}）
}
})

使用React时，您尝试执行的操作不是推荐的做法。不要自己修改DOM，使用

状态

和

道具

子组件：

var ChildrenA = React.createClass({
    render: function() {
        return <div style={{color: this.props.color}}>Hello A</div>;
    }
});

var ChildrenA=React.createClass({
render:function（）{
回复Hello A；
}
});

应用程序：

var-App=React.createClass({
render:function（）{
返回(
你好{this.props.name}
);
}
});

容器：

var Container = React.createClass({
    getInitialState: function(){
      return {color: "red"}
    },
    toggle: function(){
      this.setState({
        color: this.state.color == "red" ? "blue" : "red"
       })
    },
    render: function() {
        return (<div onClick={this.toggle}>
             <ChildrenA color={this.state.color}/>
             <ChildrenB/>
        </div>);
    }
});

var Container=React.createClass({
getInitialState:函数（）{
返回{color:“red”}
},
切换：函数（）{
这是我的国家({
颜色：this.state.color==“红色”？“蓝色”：“红色”
})
},
render:function（）{
返回(
);
}
});

JSFiddle：

---

您可能想检查一下：

jsidle reproduction这是您的案例：hmmm。这里有一个粗略的例子：我的父母有10个孩子，一次只有一个“活动”。将父级的“display:block”显示在活动的一个上，并将其他的显示为“none”似乎是合理的；

var Container = React.createClass({
    getInitialState: function(){
      return {color: "red"}
    },
    toggle: function(){
      this.setState({
        color: this.state.color == "red" ? "blue" : "red"
       })
    },
    render: function() {
        return (<div onClick={this.toggle}>
             <ChildrenA color={this.state.color}/>
             <ChildrenB/>
        </div>);
    }
});