Question

我试图从位于paerent组件上的组件中调用子组件中的方法。请参阅以下内容：

App class

    //    App.js 
    class App extends Component {
          render() {
            return (
              <div className="App">
                  <SimpleModal/>
                <FloatingButton onClick={/*would like to call HandleOpen in SimpleModal*/}/> 
              </div>
            );
          }
        }

        export default App;

这就是SimpleModal组件

//SimpleModal
    class SimpleModal extends React.Component {
      state = {
        open: false,
      };

      handleOpen = () => {
        this.setState({ open: true });
      };

      handleClose = () => {
        this.setState({ open: false });
      };

      render() {
        return (
            <Modal
              aria-labelledby="simple-modal-title"
              aria-describedby="simple-modal-description"
              open={this.state.open}
              onClose={this.handleClose}
            >
              <div style={getModalStyle()}>
                <Typography type="title" id="modal-title">
                  Text in a modal
                </Typography>
                <Typography type="subheading" id="simple-modal-description">
                  Description
                </Typography>
              </div>
            </Modal>
        );
      }
    }

    export default SimpleModal;

基本上我想从FloatingButton调用HandleOpen和HandleCall。我该怎么做？提前谢谢。

Answer 1

在父组件（<App />）中定义两个函数，并通过props将它们传递给子组件。这样，<FloatingButton>和<SimpleModal>都可以访问相同的功能。这种技术被称为＆＃34;提升状态＆＃34;和there is a very good article about it。

Answer 2

您可以将状态解除为公共父组件，而不是从兄弟组件调用函数。

这允许您将事件处理程序传递到FloatingButton组件，并将模式的当前状态传递到Modal组件。

如需更多信息，请查看relevant section in the React docs：

通常，有几个组件需要反映相同的变化数据。我们建议将共享状态提升到最接近的共同祖先。

从位于父组件中的组件调用属于子组件的方法

2 个答案: