在React中使用this.props.children时访问父上下文

时间:2016-02-19 16:10:20

标签: reactjs

鉴于以下内容,是否可以从子(非反应组件)元素访问父上下文而不是容器?

示例记录容器,理想情况下它会记录父容器。我希望Parent能够自包含,而不是让它的容器由其容器管理。

var Container = React.createClass({
  getInitialState: function () {
    return {
      context: 'container'
    }
  },
  render: function () {
    return (
      <Parent>
        <a href="#" onClick={function () {console.log(this.state.context);}.bind(this)}>click me</a>
      </Parent>
    );
  }
});

var Parent= React.createClass({
  getInitialState: function () {
    return {
      context: 'parent'
    }
  },
  render: function () {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
});

如果还有其他处理方式,请分享。

注意:要明确,我了解this关键字的工作原理以及上述示例的工作原理。这个例子只是为了说明问题。

3 个答案:

答案 0 :(得分:1)

您可以为此导入一些React助手:

var React = require('react')

...
var children = React.Children.map(this.props.children, child => {
  return React.cloneElement(child, {
    context: this.state.context
  })
})

render() {
  return <div>{ children }</div>
}
...

那么你的子组件将有this.props.context,它将是字符串'parent',但是这必须是一个React组件,因为this需要使用父prop来引用组件

var YourComponent = React.createClass({
  render() {
     return (
       <a href="#" onClick={() => console.log(this.props.context)}>
         click me
       </a>
     )
   }
})

------

var Parent = require('./Parent')
var YourComponent = require('./YourComponent')

...

render() {
  return <Parent><YourComponent /></Parent>
}

答案 1 :(得分:0)

我不知道你问题的第一部分,但是既然你评论了动态创建组件,我就是这样做的:

您可以在类的构造函数及其父级中设置状态变量:

if (typeof this.state == 'undefined') {
  this.state = {
    componentsToRender: <div></div>
  };
}

然后在父组件中,在componentDidMount()函数中:

var componentsToRender = [];
if ([conditional]) {
  // some logic so you know which component to render
  componentsToRender.push(<customChildComponentToRender key={} />);
}
else {
  componentsToRender.push(<otherComponentToRender key={} />);
}
this.setState({
  componentsToRender: <div>{componentsToRender}</div>
});

确保放置一个键(第二个代码块的第4行和第7行)或React会对你尖叫。

在回答您的初步问题时,我会看this video from the ReactJS Conference 2015以获得容器背后的更多内容。在听到Facebook上的人说(对容器有激进观点的人)之后,您可能想重新考虑设计,使您的容器更像数据层。

答案 2 :(得分:0)

我会查看来自反应网站的THIS文章。我认为这可能会让你对解决问题有一些直觉。

作为一般经验法则,我尝试仅使用this.state来处理特定组件的内部UI状态。其他一切都通过道具传递。如果您需要组件的完整上下文,我会将其作为prop或checkout传递给flux或redux,这将帮助您管理组件之间的状态。