如何在反应中将状态从父母传递给孩子？

用户1255102

如何将状态属性从父级传递给子级？在下面的实现中，Dropdown 组件有一个状态“isActive”，我想在 Button 组件中访问它以将正确的样式附加到它。Dropdown 必须是通用的，因为它应该采用不同种类的按钮。

<Dropdown items="...">
  <Button active ="false" />
</Dropdown>

Dropdwon.js

...

    constructor(props){
        super(props)
        this.state = {
         isActive: true,
        }
    }

    render (){
        return (
               <div className={styles.toggle} onClick={(event) => this.showMenu(event)}>
                    {this.props.children} /* want to set active prop for the child button here */
                </div>
        );
} 

...

快活

你有两种可能：

提升您的Dropdown状态并将其保留在其父组件中；
使用useContext钩子；

第一种方法会更好，但它可能对您的应用程序不利（我不知道）。让我为这两种情况举一个例子。

这是我将isActive状态提升到父组件的示例。

const ParentComponent = () => {
    const [isActive, setIsActive] = useState(false);

    handleIsActiveChange = (newValue) => {
        setIsActive(newValue);
    }

    <Dropdown isActive={isActive} setIsActive={handleIsActiveChange}>
        <Button isActive={isActive} />
    </Dropdown>
}

const Dropdown = props => {
    // You can use `props.isActive` to know whether the dropdown is active or not.
    // You can use `props.handleIsActiveChange` to update the `isActive` state.
}

const Button = props => {
    // You can use `props.isActive` to know whether the dropdown is active or not.
}

相反，这会利用useContextAPI：

const dropdownContext = React.createContext(null);

const Dropdown = props => {
    const [isActive, setIsActive] = useState(false);

    return (
        <dropdownContext.Provider value={{ isActive }}>
            {props.children}
        </dropdownContext.Provider>
    );
}

const Button = props => {   
    const dropdownCtx = React.useContext(dropdownContext);

    // You can use `dropdownCtx.isActive` to know whether the dropdown is active or not.
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。