如何处理React中的道具和紧密耦合的组件？

Question

我有几个相互紧密耦合的组件。最高的组件接收名为options的道具。道具options向下传递下一个组件，依此类推。

哪种方法可以从嵌套组件向其他组件发出更改？在这种情况下，我宁愿使用redux。

Answer 1

此示例适用于 React16.3及以上。

Click here查看工作示例。

a）使用反应的上下文api从父组件获取数据到嵌套的chid组件

<强> 1。祖父组成部分

  

Context允许我们将值深入传递到组件树中   通过每个组件显式线程化。为...创建上​​下文   当前主题（＆＃34;灯光＆＃34;默认值）。

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    const theme = "dark";
    return (
      <ThemeContext.Provider value={theme}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

<强> 2。父组件

  

中间的组件不必将主题传递下去   明确了。

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

第3。子组件

function ThemedButton(props) {
  // Use a Consumer to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  return (
    <ThemeContext.Consumer>
      {theme => <div>{theme}</div>}
    </ThemeContext.Consumer>
  );
}

将主题替换为选项。

有关详细信息，请参阅react doc。 Click here

b）将来自父组件的数据存储到存储，并使用redux

在嵌套子组件中获取它

  

这里是从状态获取数据并将选项数据传递给   你的组件

const mapStateToProps = (state) => ({
  options: state.options,
});

  

您正在从状态

连接组件

export default connect(
  mapStateToProps,
  null,
)(ChildComponent);