React - 在單擊不是其子元素的組件時呈現組件

Question

我試圖找出如何使組件在React中相互通信。 我有一個大型組件App。 在其中我有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 ;

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

ParentComponentOne：

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