如何在 React 兄弟组件函数之间的状态之间共享状态？ [关闭]

Question

如何在一个 React 组件函数中与另一个共享一些状态数据？两者都是另一个组件的子组件。 （我是一个 React 新手，所以我尝试过可能有点天真：1）从我的 ap.jsx 定义了一个导出的 const，其结构的属性是状态。好像在查询结构时返回 null。 2）不能使用道具，因为这是从父母到孩子的一种方式）。

Answer 1

我想最好的答案是：视情况而定。

然而，最简单的解决方案是将值保存在父组件中，并通过 props 将其传递给两个子组件。

如果你想跳过几个嵌套级别，你可以使用 React 上下文或状态管理工具，例如 redux，但这已经是一个沉重的工具。很难根据您迄今为止分享的上下文来说明您的情况到底什么是最好的。

Answer 2

如果你想共享状态，你可以使用Context概念或Redux，这是一个共享库的库。

这里有一些对你有用的链接。

• https://redux.js.org/
• https://reactjs.org/docs/context.html

Answer 3

我同意 akds 的观点，即最佳方法取决于您的场景的具体细节，但推荐的方法是让父级管理状态，除非您的场景的复杂性另有规定。

这是一个相当简单的示例，其中一个组件类作为父组件，根据在其中一个子组件中执行的操作来管理状态，两个子组件是无状态组件。关键是父级将回调函数传递给子级，以处理子级中与需要处理的状态更改相关的任何事件。在此示例中，这只是单击其中一个子组件，但它可以是任何东西。

Example on CodePen.

这是 CodePen 示例中的代码：

HTML：

<div id="example"></div>

JS：

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {child1Selected:false};
    }


    handleChild1Click(){
        this.setState({child1Selected:!this.state.child1Selected});
    }

    render(){
        return (
            <div>
                <Child1 
                  child1Selected={this.state.child1Selected} 
                  onClick={() => {this.handleChild1Click();}} 
                  style={{width:"100px", height:"100px", backgroundColor:"blue"}} 
                  />
                <Child2 
                  child1Selected={this.state.child1Selected} 
                  style={{width:"100px", height:"100px", backgroundColor:"lightgrey"}} 
                  />
            </div>
        );
    }
}

function Child1(props){
    return (
      <div onClick={props.onClick} style={props.style}>
        {props.child1Selected ? "I am Selected" : "I am NOT Selected"}
      </div>
    );
}

function Child2(props){
    return (
      <div style={props.style}>
        {props.child1Selected ? "My Sibling is Selected" : "My Sibling is NOT Selected"}
      </div>
    );
}


let loadApp = ReactDOM.render(<Parent/>, document.getElementById('example'));
loadApp;