React - 单击不是其子组件的组件时渲染组件答案

【问题标题】：React - render component when clicking on a component which is not its childReact - 单击不是其子组件的组件时渲染组件
【发布时间】：2017-09-23 12:23:41
【问题描述】：

我试图弄清楚如何在 React 中让组件相互通信。我有一个大型组件应用程序。其中我有 2 个组件：ParentComponentOne 和 ParentComponentTwo。在 ParentComponentOne 中，我有一个名为 ChildParentOne 的组件。如何仅在单击 ChildParent One 时才呈现 ParentComponentTwo

App.jsx

import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';

class App extends Component {
  state = {
      show:{
        componentTwo: false
      }
  };

  render() {
    return (
     <div>
       <ParentComponentOne />
       {this.state.show.componentTwo? <ParentComponentTwo /> : null}
     </div>
    );
  }
}

export default App;

ParentComponentOne.jsx

import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';

class ParentComponentOne extends Component {

  render() {
    return (
     <div>
       <ChildParentOne />
       <div>some content</div>
       <ChildParentOne />
     </div>
    );
  }
}
export default ParentComponentOne ;

ChildParentOne.jsx

import React, { Component } from 'react';

class ChildParentOne extends Component {

  render() {
    return (
     <div onClick={}>
       BTN
     </div>
    );
  }
}
export default ChildParentOne ;

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

将回调传递给 ParentComponentOne，当点击它的子元素时，它会改变 show.componentTwo 状态：

class App extends Component {
  state = {
      show: {
        componentTwo: false
      }
  };

  childClicked() {
    this.setState({
      show: {
        componentTwo: true
      }
    })
  }

  render() {
    return (
     <div>
       <ParentComponentOne childClicked={this.childClicked} />
       {this.state.show.componentTwo? <ParentComponentTwo /> : null}
     </div>
    );
  }
}

父组件一个：

class ParentComponentOne extends Component {

  render() {
    return (
     <div>
       <ChildParentOne onBtnClick={this.props.childClicked} />
       <div>some content</div>
       <ChildParentOne onBtnClick={this.props.childClicked} />
     </div>
    );
  }
}

现在，只需将此回调传递给ChildParentOne，并将其用作道具：

class ChildParentOne extends Component {

  render() {
    return (
     <div onClick={this.props.onBtnClick}>
       BTN
     </div>
    );
  }
}

【讨论】：