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

Question

我想动态创建 child 组件，从它们在 React 中的 parent/grandparent 组件接收 onClick 事件。在创建过程中，我想向 onClick-event 添加一个参数。基本上所需的流量是：

渲染parent组件时
将对所需函数的引用传递给动态组件的创建
在创建动态组件的过程中我想添加一个由创建者定义的参数
child 中的 onClick 事件应该使用从动态组件的创建者那里获得的参数调用 parent 中的 onClick 函数

对于代码：这是动态组件创建者和 parent

  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;

这里是非常基本的 child 组件，使用 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;

有效方法

child 个组件的动态渲染工作正常。

断的地方

如您所见，奇迹发生在 open={() => (name) => this.open(name)}。我想要的是：将 this.open 传递给创建者，将 open(name) 设置为参数并将打开函数传递给 child。

一切正常，如果我直接在 parent 中说 "name" 参数，但出于多种原因我不想这样做。所以我需要某种柯里化，但我不知道哪里出了问题。参数 "name" 目前在 creator 中没有正确设置。

Answer 1

在 CreateComponent 中设置 open: () => this.props.open(this.props.name).

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

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

React pass function to dynamic created child with additional parameter

javascript

currying

reactjs