Question

我有一堆反应组件（它的模态）。

<Modal> // Grandparent
  <Footer> // Parent
    <Button label="Click Me" clickAction={
      () => {

        /* So what goes here? */

      }
    }/> //Child
  </Footer>
</Modal>

Modal将所有子项传递给close模态函数。此函数再次传递给页脚的所有子节点。

export default class Footer extends React.Component {

  constructor(props) {
    super(props);

    this.handleClose = this.handleClose.bind(this);
  }
  handleClose() {
    this.props.closeModal();
  }

  render() {

    const childrenWithProps = React.Children.map(this.props.children,
      (child) => React.cloneElement(child, {
        closeModal: this.handleClose
      })
    );

    return (
      <footer}>
        {childrenWithProps}
      </footer>
    );
  }
}

按钮类的内部结构如下所示：

  constructor(props) {
    super(props);

    this.click = this.click.bind(this);
  }

  click() {
    this.props.clickAction();
  }


  render() {

    return <a
      href='#'
      onClick={this.click}
    >
      {this.props.label}
    </a>
  }

我不想做的是将关闭方法直接烘焙到按钮中，因为当它是模态页脚的孩子时它应该只能访问它。

所以我试图解决的问题（参见第一个代码块）是/ *所以这里有什么？ * /区域。使用＆＃39;这个＆＃39;只是返回＆＃39; undefined＆＃39;所以我无法达到我的closeModal方法。

有什么建议吗？

Answer 1

啊想出了问题。箭头功能没有“这个”限制。

<div class="bottom-row">
  <ul>
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>   
        <li class="photo-preview"><img src="photo/2.JPG"></li>                             
    </ul>
</div>

Answer 2

您可能会考虑仅将props传递给需要使用它们的组件。换句话说，只需将closeModal函数明确地传递给您的按钮作为道具：

function Footer (props) {
  return (
    <footer>{props.children}</footer>
  )
}

function Button (props) {
  return (
    <a href='#' onClick={props.onClick}>{props.label}</a>
  )
}

class Modal extends React.Component {
  constructor (props) {
    super(props)
    this.closeModal = this.closeModal.bind(this)
  }

  closeModal () {
    /* implement me */
  }

  render () {
    return (
      <div>
        <Footer>
          <Button label='Click Me' onClick={this.closeModal} />
        </Footer>
      </div>
    )
  }

这样，您就不必考虑按钮的上下文，即通过父模式（例如您使用的cloneElement技术）将哪些道具“无形地”传递给它。某些Footer子项的组件可能不需要访问closeModal，因此没有理由将其传递给它们。

如何通过祖父母的道具启动从父母传递的功能

2 个答案: