Question

我想动态创建子组件，以从React中其父/祖父母组件接收一个onClick事件。在创建过程中，我想向onClick事件添加一个参数。基本上所需的流量是：

渲染父组件时
将对所需功能的引用传递给动态组件的创建
在创建动态组件的过程中，我想添加一个由创建者定义的参数
子级中的onClick事件应使用其从动态组件的创建者获得的参数来调用父级中的onClick函数

对于代码：这是动态组件的创建者和父对象

  import React from 'react';

  // This is the creator of my dynamic components
  // It currently sets this.props.name as parameter for the parent function

  class CreateComponent extends React.Component {
    render(){
      return(
        <div className="childBox">
           // this.props.component is a react component of type ImageBox (see next code block)
          {React.cloneElement(this.props.component, {
            open: this.props.open(this.props.name),
            close: this.props.close,
          })}
        </div>
      )
    }
  }

  // This is the parent component, using the creator and some state to open/close different components
  export class DynamicContentGrid extends React.Component {
    constructor() {
      super();
      this.state = { activeComponent: '' };
    }

    close() {
      this.setState({ activeComponent: '' });
    }

    open(component) {
      this.setState({ activeComponent: component })
    }

    render() {
      console.log(this.props.children);
      return(
        <div className={css(styles.grid)}>
          <div className={css(styles.boxUpperLeft, styles.box)}>
            <CreateComponent
              component={this.props.children['upperLeft']}
              name='upperLeft'
              open={() => (name) => this.open(name)}
              close={() => this.close()}
            />
          </div>
        </div>
      )
    }
  }


  export default DynamicContentGrid;

这是使用this.props.close而没有参数的最基本的子组件（应在创建者中设置）：

import React from 'react';
export class ImageBox extends React.Component {
  render() {
    const {title, link, img} = this.props.content.front;
    return(
          <div>
            <h1>{title}</h1>
            <h2 onClick={this.props.open}>{link}</h2>
            <img src={img} />
          </div>
     )
  }
}

export default ImageBox;

有效的方法

动态呈现子组件效果很好。

出现问题的地方

如您所见，魔术发生在open={() => (name) => this.open(name)}中。我想要的是：将this.open传递给创建者，将open（name）设置为参数，然后将open函数传递给子级。

如果我直接在父级中说“ name”参数，那么一切都很好，但是由于某些原因，我不想这样做。因此，我需要一些欺骗，但我不知道这是怎么回事。目前在创建者中未正确设置参数“名称”。

Answer 1

在CreateComponent集open: () => this.props.open(this.props.name)中。

此外，删除() => (name) => this.open(name)并替换为this.open并将this.open = this.open.bind(this);放入构造函数。

使用附加参数将传递函数反应到动态创建的子级

1 个答案: