React - 从子级访问父级的状态，无需嵌套函数

Question

你好，
我今天第一次来找你，因为我还没有找到解决我的问题的方法。
我已经使用 React 几个星期了，不要对我的代码质量太残酷

Answer 1

有多种方法可以从子状态访问父状态。

将状态作为 props 传递

首选方法是将状态和/或更改函数传递给子级。

示例：

const App = () => {
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <button onClick={handleOpen}>Open modal</button>
            <Modal onClose={handleClose} open={open} />
        </div>
    );
};

const Modal = ({ open, onClose }) => (
    <div className={open ? "open" : "close"}>
        <h1>Modal</h1>
        <button onClick={onClose}>Close</button>
    </div>
);

ReactDOM.render(<App />, document.querySelector("#app"));

演示： https://jsfiddle.net/47s28ge5/1/

使用 React Context

第一个当子级嵌套很深并且您不想沿着组件树携带状态时，方法会变得复杂。

然后，您可以使用上下文在多个子级之间共享状态。

const AppContext = React.createContext(undefined);

const App = () => {
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <AppContext.Provider value={{ open, onClose: handleClose }}>
            <div>
                <button onClick={handleOpen}>Open modal</button>
                <Modal />
            </div>
        </AppContext.Provider>
    );
};

const Modal = () => {
    const { open, onClose } = React.useContext(AppContext);

    return (
        <div className={open ? "open" : "close"}>
            <h1>Modal</h1>
            <button onClick={onClose}>Close</button>
        </div>
    );
};

ReactDOM.render(<App />, document.querySelector("#app"));

演示：https://jsfiddle.net/dho0tmc2/3/

使用减速器

如果您的代码得到更复杂的是，您可能会考虑使用存储在组件之间共享全局状态。

您可以查看流行的选项，例如：

• Mobx：https://mobx.js.org/ （我个人最喜欢的）
• Redux：https://redux.js.org/
• RxJS：https://rxjs.dev/

Answer 2

我可以说欢迎此时此刻做出反应，我为你感到高兴

好的，我可以理解你的问题是什么。
但没有问题，这个错误是由于你的经验不足造成的。

据我了解，您想要单击下拉菜单并将其打开。
这里我们有嵌套的下拉菜单。

我想这就是你的答案：
您应该在每个下拉列表中声明一个状态，而不是在父级中声明状态。