React中如何在同一父组件嵌套的组件间传递方法？

当然有可行的实现方式！不用把AddUser移到ModalWrapper的内部render里，这里有几种靠谱的方案：

方案1：通过克隆子组件传递方法 #

这种方式完美适配你当前的组件结构——因为AddUser是作为ModalWrapper的children传入的，你可以在ModalWrapper内部克隆这个子组件，把closeModal方法作为props传递进去。

ModalWrapper组件改造： #

import React from 'react';

class ModalWrapper extends React.Component {
  closeModal = () => {
    // 这里写你的关闭模态框逻辑，比如修改isOpen状态
    console.log('模态框已关闭');
  };

  render() {
    const { children, title, buttonText } = this.props;
    // 克隆子组件并注入closeModal方法
    const childWithCloseHandler = React.cloneElement(children, {
      closeModal: this.closeModal
    });

    return (
      <div>
        <button onClick={/* 这里写打开模态框的逻辑 */}>{buttonText}</button>
        {/* 模态框本体的代码省略 */}
        {childWithCloseHandler}
      </div>
    );
  }
}

AddUser组件使用： #

import React from 'react';

class AddUser extends React.Component {
  handleConfirmAdd = () => {
    // 这里写添加用户的业务逻辑
    console.log('用户添加完成');
    // 调用从props拿到的closeModal方法
    this.props.closeModal();
  };

  render() {
    return (
      <div>
        <input type="text" placeholder="输入用户名" />
        <button onClick={this.handleConfirmAdd}>确认添加</button>
      </div>
    );
  }
}

你的App组件代码完全不用改动，这样AddUser就能顺利调用ModalWrapper的关闭方法了。

方案2：使用React Context API #

如果后续你的组件层级变深，或者有多个子组件需要调用closeModal，用Context会更省心，不用一层一层手动传递props。

第一步：创建Context #

import React from 'react';

const ModalContext = React.createContext();

第二步：ModalWrapper提供Context值 #

class ModalWrapper extends React.Component {
  closeModal = () => {
    console.log('模态框已关闭');
  };

  render() {
    return (
      <ModalContext.Provider value={{ closeModal: this.closeModal }}>
        {/* 模态框相关元素 */}
        {this.props.children}
      </ModalContext.Provider>
    );
  }
}

第三步：AddUser消费Context #

如果AddUser是类组件：

class AddUser extends React.Component {
  static contextType = ModalContext;

  handleConfirmAdd = () => {
    console.log('用户添加完成');
    this.context.closeModal();
  };

  render() {
    return (
      <div>
        <input type="text" placeholder="输入用户名" />
        <button onClick={this.handleConfirmAdd}>确认添加</button>
      </div>
    );
  }
}

如果AddUser是函数组件，用useContext钩子更简洁：

import { useContext } from 'react';

function AddUser() {
  const { closeModal } = useContext(ModalContext);

  const handleConfirmAdd = () => {
    console.log('用户添加完成');
    closeModal();
  };

  return (
    <div>
      <input type="text" placeholder="输入用户名" />
      <button onClick={handleConfirmAdd}>确认添加</button>
    </div>
  );
}

方案3：使用Ref转发（Forwarding Refs） #

你也可以通过ref获取ModalWrapper的实例，再把closeModal方法传递给AddUser。

ModalWrapper组件（类组件无需额外改造） #

class ModalWrapper extends React.Component {
  closeModal = () => {
    console.log('模态框已关闭');
  };

  render() {
    // 模态框渲染逻辑省略
    return <div>{this.props.children}</div>;
  }
}

App组件改造： #

class App extends React.Component {
  modalRef = React.createRef();

  render() {
    return (
      <div>
        <ModalWrapper 
          ref={this.modalRef}
          title="Add Member" 
          buttonText="Add Member"
        >
          <AddUser closeModal={() => this.modalRef.current?.closeModal()} />
        </ModalWrapper>
      </div>
    );
  }
}

注意：组件挂载初期this.modalRef.current可能为null，所以用可选链操作符?.做一下容错处理，避免报错。

内容的提问来源于stack exchange，提问作者C. Johnson