子不能在 Reactjs 中触发属于父的函数

问题描述

我有一个模态父组件和一个表单子组件。打开和关闭模态的函数在父函数中，但提交函数在子函数中。我想要做的是在提交时关闭模态，但为此我需要 来自子级的提交函数 来触发 来自父级的关闭模态函数。我知道如何将函数从 < Parent /> 传递到 < Child />，但这里的不同之处在于子进程以 {children} 的形式在父进程中返回。当孩子以这种形式返回时，我该怎么做？

这是模态组件或父组件：

<ModalInMobile
      id="SearchFiltersMobile.filters"
      isModalOpenOnMobile={this.state.isFiltersOpenOnMobile}
      onClose={this.cancelFilters}
      showAsModalMaxWidth={showAsModalMaxWidth}
      onManageDisableScrolling={onManageDisableScrolling}
      containerClassName={modalContainerStyles}
      closeButtonMessage={modalCloseButtonMessage}
    >
      <button className={showListingsButtonStyles} onClick={this.closeFilters}>
      X
        </button>
      {this.state.isFiltersOpenOnMobile ? (
        <div className={modalFilterWrapperStyles}>{children[this.state.renderingModals]}</div>
      ) : null} 
    </ModalInMobile>

解决方法

您可以使用 cloneElement 将您的道具传递给您的孩子。

export default function App() {
  return (
    <div className="App">
      <Parent>
          <Child />
      </Parent>
    </div>
  );
}



const Child = ({ parentProps }) => {


  return (<div>I am a child ({parentProps})</div>)

}

const Parent = ({ children }) => {

  const iAmProps = "i am a prop"

  const childProps = React.Children.map(children,child => {

    if (React.isValidElement(child)) {
      return React.cloneElement(child,{ parentProps: iAmProps }); //add your props here.
    }
    return child;
  });

  return ( <>{childProps}</>)

}

codesandbox