Реакция функции передачи на динамически созданный дочерний элемент с дополнительным параметром

Question

Я хочу динамически создавать дочерние компоненты, получая событие onClick от их родительского / прародительского компонента в React.При создании я хочу добавить параметр в 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); в конструктор.