javascript - 在 Reactjs 中，子级无法触发属于父级的函数

Question

我有一个模态父组件和一个表单子组件。打开和关闭模态框的功能在父级中，而提交功能在子级中。我想要做的是在提交时关闭模态，但为此我需要来自子级的提交函数来触发来自父级的关闭模式函数。我知道如何从 to 传递一个函数< 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>

标签： javascriptreactjsformsparentchildren

Answer 1

您可以使用 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}</>)

}

密码箱