javascript - React JS 中不同组件之间如何共享状态？

Question

我想创建下拉组件。

当我点击 DropdownHandler组件，我想保存状态 isOpen这可以是 true或 false .如果true , 同样的 state被 <DropdownContent/> 使用显示内容。默认情况下，state isOpen是false在 <Dropdown />组件

请问我该怎么做？

应用程序.jsx

import React from 'react';
import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dropdown.jsx';

class HeaderConnected extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <Dropdown>
                 <DropdownHandler>
                     <Avatar title="Roberto"></Avatar>
                 </DropdownHandler>
                 <DropdownContent>
                     <li>Menu</li>
                     <li>Settings</li>
                 </DropdownContent>
               </Dropdown>
            </div>
        );
    }

}

export default HeaderConnected;

下拉.jsx

export class Dropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            opened: false
        }
    }

    render() {

        return (
            <div className="DROPDOWN">
                {this.props.children}
            </div>
        );
    }

}

export class DropdownHandler extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="DROPDOWN__HANDLER">
                {this.props.children}
            </div>
        );
    }

}

export class DropdownContent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="DROPDOWN__CONTENT">
                {this.props.children}
            </div>
        );
    }

}

Answer 1

如果你不想使用 redux。您设置和控制子组件的 opend 状态，并使用 Prop 将其设置为 DropdownContent。因此，当您通过单击 DropdownHandler 更改打开时，您的 DropdownContent 将收到新的提示并调用重新渲染。

import React from 'react';
import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dropdown.jsx';

class HeaderConnected extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            opened: false
        }
    }
    onClick(){
       let condition = this.state.opened;
       this.setState({opened: !condition });
    }
    render() {
        return (
            <div>
              <Dropdown>
                 <DropdownHandler onClick={this.onClick.bind(this)}>
                     <Avatar title="Roberto"></Avatar>
                 </DropdownHandler>
                 <DropdownContent opened={this.state.opened}>
                     <li>Menu</li>
                     <li>Settings</li>
                 </DropdownContent>
               </Dropdown>
            </div>
        );
    }

}

export default HeaderConnected;