Вызов метода компонента из другого компонента с помощью ref

Question

Я пытаюсь вызвать метод show моего Modal компонента, когда пользователь нажимает <button> в компоненте App, но он не работает.

Я использую a ref для доступа к компоненту Modal из компонента App.

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.show = this.show.bind(this);
  }

  show() {
    console.log('show');
  }

  render() {
    return (
      <div>...</div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.modalRef = React.createRef();
  }

  render() {
    return (
      <div>
        <Modal ref={this.modalRef}/>

        <button id="myBtn" onClick={ this.modalRef.show }>
          Call show modal method
        </button>
      </div>
    );
  }
}

Answer 1

Вы обычно делаете это, передавая опору, а не вызывая метод непосредственно в компоненте:

const Modal = ({
  isVisible,
}) => {   
  useEffect(() => {
    console.log(`The modal has been ${ isVisible ? 'opened' : 'closed' }.`);
  }, [isVisible]);

  return (
    <div className={ cx({ ['isVisible']: isVisible }) }>...</div>
  );
}

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleButtonClick = useCallback(() => {
    // Toggle the `isModalVisible` value:
    setIsModalVisible(prevIsModalVisible => !prevIsModalVisible);
  }, []);

  return (
    <div>
      <Modal isVisible={ isModalVisible } />

      <button onClick={ handleButtonClick }>
        { isModalVisible ? 'Close' : 'Open'} Modal
      </button>
    </div>
  )
};

Answer 2

Я пробовал использовать обычный подход ref и, похоже, работает со всем вашим существующим кодом

class Modal extends React.Component {
  show = () => {
    console.log("show");
  };

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

class App extends Component {
  render() {
    return (
      <div>
        <Modal ref={ref => (this._modal = ref)} />
        <button id="myBtn" onClick={() => this._modal.show()}>
          call show modal method
        </button>
      </div>
    );
  }
}

Ссылка на демонстрацию: https://codesandbox.io/s/react-example-z893s?file= / index. js: 77-461

Сообщите мне, если это поможет!