Question

这似乎是一个愚蠢的问题，但我很好奇这是否可行（推荐）。请考虑以下事项：

export default class Example extends Component {

  constructor(props){
    super(props);

    this._variable = value;
  }

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

现在我知道我可以将this._variable传递给孩子们：

this._childrenWithProps = React.Children.map(this.props.children,
    (child) => React.cloneElement(child, {
        variable:   this._variable,
    })
);

现在，孩子可以访问this.props.variable。但是（我完全不理解这个概念）我可以使用上下文或类似的东西来：

// In another component some where ... 
render() {
  // reference variable (this._variable, or variable) here

  <Example>
    // Children here ...
  </Example>
}

这是用于什么上下文的？或者我在做一些可怕的错误？基本上我想要引用this._variable在元素外面但在元素中设置它。这可能吗？

Answer 1

是的，您可以使用上下文将变量传递给组件的所有后代，但作为一般经验法则，您应该避免使用上下文（如果您不完全需要它）。上下文打破了React的数据流模式，并且通常使代码更难阅读，因为props可能是隐式的而不是显式的。根据文件：

使用上下文会使您的代码更难理解，因为它会使数据流不太清晰。它类似于使用全局变量通过应用程序传递状态。

通常，上下文最适合主题信息之类的内容，并且在某些路由库中也很有用。通常有一种更好的方式来传递数据（cloneElement上的React.Children示例非常好，并且您可以在很多React项目中找到相当常见的代码片段。 / p>

如果您仍希望在该警告之后使用上下文，那么您需要对提供上下文（通常是包装器）和组件的组件进行一些调整接收上下文。

您的上下文提供程序需要一个getChildContext函数，该函数返回您想要为其所有子项提供的上下文对象。您还需要声明childContextTypes属于该类的属性。

class Example extends Component {

  getChildContext() {
    return { variable: 'foo' };
  }

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

Example.childContextTypes = {
  variable: React.PropTypes.string
};

然后，无论您在哪里定义将作为要接收上下文的子项传递的组件，您都需要添加相同的childContextTypes属性。它可以通过this.context对象访问上下文。

class Child extends Component {

  render() {
    return (<div>{this.context.variable}</div>);
  }
}

Child.childContextTypes = {
  variable: React.PropTypes.string
};

撰写childContextTypes 必要。如您所见，使用上下文并不总是意味着更少的代码。

在React中引用变量外部的变量？

1 个答案: