显示兄弟组件 reactJs答案

【问题标题】：Show sibling components reactJs显示兄弟组件 reactJs
【发布时间】：2017-06-13 16:27:59
【问题描述】：

我是 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 来显示我的组件。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

那么您需要做的就是将此道具传递给<Header> 内的点击处理程序。

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

【讨论】：