Question

说我有

<component1>
     <component2>
           <component3>
                 <component4>

（其中component1有子组件2，组件2有子组件3，组件3有子组件4）

并说我想将一些东西从component1传递给component4。我需要在链条上传递道具吗？所以component1 - ＆gt; component2 - ＆gt; component3 - ＆gt; component4

请注意： 这些组件不在同一个文件中。所以在component1.js中我引用<component2>，在component2.js中我引用<component3>等。

Answer 1

这里有2个主要选项：

传下道具。
使用context API

使用props，您还有两个主要选项：

您可以隐藏道具

<Parent>
  <ChildOne {...props}>
    <ChildTwo {...props}>
    </ChildTwo>
  </ChildOne>
</Parent>

隐藏道具的运行代码段

＆＃13;

const ChildTwo = props => (
  <div>{`Child two says: ${props.myProp}`}</div>
);

const ChildOne = props => (
  <div>
    <ChildTwo {...props} />
  </div>
);

const Parent = props => (
      <div>
        <ChildOne  {...props} />
      </div>
    );

ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

或者做到明确

<Parent>
  <ChildOne propOne={propOne}>
    <ChildTwo propOne={propOne}>
    </ChildTwo>
  </ChildOne>
</Parent>

为明确的道具运行代码段

＆＃13;

const ChildTwo = (props) => (
  <div>{`Child two says: ${props.myProp}`}</div>
);

const ChildOne = props => (
  <div>
    <ChildTwo myProp={props.myProp} />
  </div>
);

const Parent = props => (
      <div>
        <ChildOne  myProp={props.myProp} />
      </div>
    );

ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

react-redux does behind the scenes

运行上下文API的示例：

＆＃13;

const ChildTwo = (props, context) => (
  <div>{`Child two says: ${context.myProp}`}</div>
);

ChildTwo.contextTypes = { myProp: React.PropTypes.string }

const ChildOne = props => (
  <div>
    <ChildTwo />
  </div>
);

class Parent extends React.Component {

  getChildContext() {
    const { myProp } = this.props;
    return { myProp };
  }

  render() {
    return (
      <div>
        <ChildOne />
      </div>
    );
  }
}

Parent.childContextTypes = {
  myProp: React.PropTypes.string
};

ReactDOM.render(<Parent myProp="hi there" />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

请注意，此示例使用的是反应v15，React.PropTypes的语法已更改，因为反应v16 PropTypes不再是react库的一部分，它是提取到另一个库prop-types。

另请注意，即文档advise against the usage of the context API：

如果您不是经验丰富的React开发人员，请不要使用上下文。那里通常是使用props实现功能的更好方法和州。

Answer 2

你可以使用React的内置Context API，虽然我不建议你过分依赖它，因为这可能会被弃用或者变成一个完整稳定的功能。截至目前，Facebook警告用户在他们的文档WARNING中有一些要点。如果没有这种打嗝，API就会很棒，并且有助于维护整洁的代码，而无需将道具一直发送给预期的后代。

CONTEXT API

COMPONENT 1

class Component1 extends React.Component {
  getChildContext() {
    return {
      yourProp: "someValue" // you can also add a function like yourProp: someFunc
    };
  }

  render() {
    <Component2 />
  }
}

Component1.childContextTypes = {
  yourProp: PropTypes.string
};

COMPONENT 2

class Component2 extends React.Component {
  render() {
    return (
      <Component3 />
    );
  }
}

COMPONENT 3

class Component3 extends React.Component {
  render() {
    return (
      <Component4 />
    );
  }
}

<强> COMPONENT4

class Component4 extends React.Component {
  render() {
    return (
      <div>
        {this.context.yourProp}      
      </div>
    );
  }
}

Component4.contextTypes = {
  yourProp: PropTypes.string
};

如果你不选择使用它，有很多策略。

REDUX
EVENT EMITTER
传递所有通往下降的方式

Answer 3

是的，只使用React，你需要通过每个组件传递道具，即使组件没有使用该道具。所以在你的例子中，control2＆amp; control3不关心道具，但需要传递它。以下是您需要做的事情。

<Control1 test={this.state.test}>
  <Control2 test={this.props.test}>
    <Control3 test={this.props.test}>
      <Control4 test={this.props.test} />
    </Control3>
  </Control2>
</Control1>

这可能会很麻烦，因此redux可以提供帮助。

如何将信息传递给反应中的嵌套组件？

3 个答案: