javascript - 显示兄弟组件 reactJs

Question

我是 React 世界的新手，我会展示兄弟组件中的组件。我有父组件:

import Toast from './components/Toast/Toast'
class App extends Component {
    constructor(){
        super();
        this.state = {
            showToast:false
        };
    }   
  render() {
    return (
       <div id="cont">
          <Toast showToast={this.state.showToast}/>
          <Header />
        </div>

    );
  }
}

在我的 Toast 组件中:

class Toast extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const showToast = this.props.showToast;

        let toast = null;
        if (showToast) {
          toast = <div className="visible">Toast Ok</div>;
        }else{
            toast = null;
        } 

        return (
          <div>
            {toast}
          </div>
        );
      }
}

export default Toast;

在我的 Header 组件中我有:

class Header extends Component {
    render() {
       return (
         <button> // With click, show toastComponents so setState parent </button>
       )
    }

因此，如果我单击按钮，我将设置状态键 showToast 以显示我的组件。

Answer 1

您可以将函数传递给您的 <Header>组件，然后在单击按钮时调用它。

let showToast = () => this.setState({ showToast: true });
// ...
<Toast showToast={this.state.showToast}/>
<Header onClick={showToast}>

然后您需要做的就是将此 Prop 传递给 <Header> 中的点击处理程序.

<button onClick={this.props.onClick}>