Reactjs 如何在react中将状态从父级传递给子级？

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

<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>
        );
} 

...

。。。
建造师（道具）{
超级（道具）
此.state={
是的，
}
}
渲染（）{
返回(
this.showMenu（事件）}>
{this.props.children}/*要在此处为子按钮设置活动的道具*/
);
} 
...

在您的按钮中，使用

this.props.isActive

---

在您的按钮中，使用

this.props.isActive获取它

除了我链接的答案之外，可能还有另一种实现此目的的方法，我没有提到

您可以将函数作为下拉列表的子元素发送，该下拉列表将

isActive

作为变量：

<Dropdown items="...">
  {isActive => <Button active={isActive} />}
</Dropdown>

{isActive=>}

然后，是渲染函数，只需调用该函数并将状态值作为参数发送：

render(){
    return (
        <div className={styles.toggle} onClick={(event) => this.showMenu(event)}>
            {this.props.children(this.state.isActive)}
        </div>
    );
} 

render（）{
返回(
this.showMenu（事件）}>
{this.props.children（this.state.isActive）}
);
} 

除了我链接的答案之外，可能还有另一种实现这一点的方法，我没有提到

您可以将函数作为下拉列表的子元素发送，该下拉列表将

isActive

作为变量：

<Dropdown items="...">
  {isActive => <Button active={isActive} />}
</Dropdown>

{isActive=>}

然后，是渲染函数，只需调用该函数并将状态值作为参数发送：

render(){
    return (
        <div className={styles.toggle} onClick={(event) => this.showMenu(event)}>
            {this.props.children(this.state.isActive)}
        </div>
    );
} 

render（）{
返回(
this.showMenu（事件）}>
{this.props.children（this.state.isActive）}
);
} 

您有两种可能：

提起您的

下拉列表

状态并将其保留在其父组件中

使用

useContext

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

---

这是一个示例，我将

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.
}

---

你有两种可能：

提起您的

下拉列表

状态并将其保留在其父组件中

使用

useContext

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

---

这是一个示例，我将

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.
}

---

它是？这回答了你的问题吗？它是？这回答了你的问题吗？