Question

我有这样的情况：

我将具有内容的父模式组件称为：

<Modal onClickOnYesButton ={() => console.log('test')}>
   <ModalContent />
</Modal>

模态组件本身看起来像这样：

const Modal = ({ children }) => {
  return(
   <div>
    {children}
   </div>
  )
}

因此，使用children在模式内部呈现模式内容组件。问题是如何将onClickOnYesButton传递给<ModalContent />而不直接将其作为ModalContent属性放置？

Answer 1

如何将onClickOnYesButton传递给没有直接将其作为ModalContent属性

如果要将道具传递给孩子，可以在withCredentials: true内使用React.cloneElement(children, { ...props })。

即像这样的东西：

Modal

尽管请注意，这仅适用于一个孩子，如果您有更多孩子，则需要将const Modal = ({ children, ...props }) => { return( <div> { React.cloneElement(children, { ...props }) } </div> ) }包装在React.cloneElement中。

Answer 2

可以将onClick中使用的方法定义为静态方法，并导入组件并使用<ComponentName>.<functionName>访问该功能。

class ModalParent extends React.Component {
  render() {
    return (
      <Modal>
        <ModalContents />
      </Modal>
    );
  }
  static onClickYes = (e) => {
    console.log(e.target, 'yes')
  }
}

class ModalContents extends React.Component {
  render() {
    return (
      <div onClick={ModalParent.onClickYes}>Some Modal Contents</div>
    );
  }
}

class Modal extends React.Component {
  render() {
    return (
      <div className="modal" onClick={ModalParent.onClickYes}>
        <h1>Modal</h1>
        {this.props.children}
      </div>
    )
  }
}

ReactDOM.render(<ModalParent />, document.getElementById('root'));

.modal {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

使用children方法将parent属性传递给child组件

2 个答案: