Как из одного компонента вызвать метод другого компонента в React?

Question

[Максим Калинин]

Есть компонент списка:

class Service extends React.Component {

  render() {
    return (
      <li className="services__item" onClick={Modal.openModal}>
        {this.props.name}
      </li>
    );
  }
}

Хочу по клику на него, обратиться к другому компоненту, вызвать его метод и тем самым сделать его видимым(модальное окно).

class Modal extends React.Component{
    constructor(props){
        this.state = {
            showModal: false
        }
    }

    openModal = () =>{
        this.setState = {showModal: true}
    }

    render(){
        return(
            <div>
                
                    <div className="service-modal-wrapper" openModal={this.openModal}>
          <div className="service">
              <div className="service-header">
                  <h3 className="service-header__title">{this.props.name}</h3>
              </div>
              <div className="service-content">
                  <ul className="service-content__descript">
                      <li className="service-content__item">1</li>
                      <li className="service-content__item">2</li>
                      <li className="service-content__item">3</li>
                      <li className="service-content__item">4</li>
                  </ul>
              </div>
          </div>
      </div>
            </div>
           
        );
    }
}

Как мне этого добиться?

Answer 1

[Zhanna_K]

const Service =  (props) => {
const [showModal, setShowModal] = useState(false)
    return (
<div>
      <li className="services__item" onClick={() =>setShowModal(true)}>
        {props.name}
      </li>
    {showModal && <Modal />}
</div>
    );
}

Comments

[Максим Калинин]

А что если компонент Modal у меня выходит за границы всего контента. То есть он у меня body -> Modal. Это я сделал чтобы была возможность позиционировать элемент поверх всего основного, например поверх body -> content.

[G F]

Максим Калинин, фрагменты юзни

[Zhanna_K]

Мне кажется это не мешает абсолютно спозиционировать модальное окно. Прописать стили для него и все.

Можно посмотреть такое демо

Есть ещё react-modal

Answer 2

[8XL]

Я могу ошибаться, но разве это не решается:
1. Либо передачей метода в пропсы дочернего компонента(в таком случае состояние модального окна хранится в родительском компоненте). Модальное окно подписано на состояние showModal, а компонент Service в пропсы получает сам метод изменения состояния модального окна.
2. Так как компоненты классовые, можно обратиться к нативному js и воспользоваться методом super()...но не уверен, что это будет хорошим решением.
3. Либо, как предложила Zhanna_K, переписав стили компонента на абсолютное позиционирование.