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

Question

鉴于以下情况，是否可以从子(非 react 组件)元素访问父上下文而不是容器？

示例日志容器，理想情况下它会记录父级。我希望 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 关键字的工作原理以及上述示例为何如此工作。这个例子只是为了说明问题。

Answer 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 需要引用使用父属性到组件

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>
}