在 React 父功能组件（react-dual-listbox）中访问 React 子类组件状态的最佳方法答案

【问题标题】：Best way to access state of a React child class component in React parent functional component (react-dual-listbox)在 React 父功能组件（react-dual-listbox）中访问 React 子类组件状态的最佳方法
【发布时间】：2021-09-29 21:24:23
【问题描述】：

我倾向于使用 react 功能组件和钩子，因为我没有很多 react 经验。我想在父功能组件中使用 react-dual-listbox 类组件。在这个父组件中，我希望能够访问子类组件的selected 状态。最好的方法是什么？

来自https://github.com/jakezatecky/react-dual-listbox 的子 react-dual-listbox 组件

import React from 'react';
import DualListBox from 'react-dual-listbox';

const options = [
    { value: 1, label: 'Option One' },
    { value: 2, label: 'Option Two' },
];

class DualListChild extends React.Component {
    state = {
        selected: [1],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                options={options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

包含在标准功能组件中

function Parent() {
    return(
        <div>
            <DualListChild/>
        </div>
    )
}

export default Parent;

是否有可能，例如，在父组件中有一个钩子来改变与双列表框选择的状态相对应的状态？本质上我想将状态传递给功能组件？有没有办法做到这一点？

谢谢

【问题讨论】：

在反应中，您应该将状态提升到父组件并将其作为道具与处理程序一起传递以更改状态，而不是向上传递状态（这是一种反模式）。一般规则是：数据向下流动，动作冒泡。

标签： javascript reactjs listbox react-component react-state

【解决方案1】：

除了使用 useState 钩子之外，您将执行与 DualListChild 中类似的操作：

class DualListChild extends React.Component {
    onChange = (selected) => {
        this.props.onSelected(selected);
    };

    render() {
        return (
            <DualListBox
                options={options}
                selected={this.props.selected}
                onChange={this.onChange}
            />
        );
    }
}

function Parent() {
    const [selected, setSelected] = React.useState();
    return (
        <div>
            <DualListChild selected={selected} onSelected={setSelected} />
        </div>
    )
}

现在您可以访问 Parent 组件中的 selected（甚至是 setSelected）。

【讨论】：

非常感谢，比我尝试的任何方法都更优雅的解决方案... :)
@JackAtkinson 当你经常使用 React 时，你会开始看到某些问题的某种解决方案，只需要练习。如果您发现此答案最有帮助，请将其标记为您问题的解决方案。

【解决方案2】：

作为一种替代方式，您可以使用另一种状态来跟踪父级中的选定选项并将其设置函数发送给子级。每当孩子的状态发生变化时，调用来自父母的 setter 函数。这样，选定的选项状态将随时为子组件和父组件的最新值。

function Parent() {
    const [selectedOptions, setSelectedOptions] = useState([]);

    return(
        <div>
            <DualListChild onSelectedOptionsChange={setSelectedOptions}/>
        </div>
    )
}

export default Parent;


class DualListChild extends React.Component {
    ...
    onChange = (selected) => {
        this.setState({ selected });
        props.onSelectedOptionsChange(selected);
    };
    ...
}

【讨论】：