Как передать опору для работы в ReactJS - PullRequest
Новая
       21

Как передать опору для работы в ReactJS

0 голосов
/ 20 июня 2020

У меня есть массив с именем selectedData как состояние в моем основном классе. Этот класс вызывает компонент с именем Wrapper, а Wrapper вызывает функциональный компонент с именем RenderItem. Я хочу иметь возможность использовать массив selectedData в моей функции RenderItem.

Я знаю, что это может быть не самый эффективный способ вызова функции, но я использую пользовательский интерфейс с открытым исходным кодом, называемый ReactiveSearch для отображения результатов моего поиска, и единственный способ заставить его работать до сих пор - это вызвать Wrapper, а затем RenderItem. Я бы хотел по возможности избежать этого.

Сводка моего кода приведена ниже: 


const Wrapper = (props) => {
  return (res, triggerClickAnalytics, selectedData) => (
    <RenderItem
      res={res}
      triggerClickAnalytics={triggerClickAnalytics}
      addFunc={props}
      selectedData={props.selectedData}
    />
  );
};
class Search extends Component {
  constructor(props) {
    super(props);
    this.addFunc = this.addFunc.bind(this);
    this.state = { selectedData:[] }
  }
  addFunc(resultdata) {
   (some function)
  }

  render() {
    return (
          <ReactiveList
            componentId="results"
            dataField="_score"
            size={10}
            renderItem={Wrapper(this.addFunc, this.state.selectedData )}
          />
    );
  }
}

const RenderItem = ({ res, triggerClickAnalytics, addFunc, selectedData }) => {

  let { unit, title, system, score, proposed, id } = {
    title: "maker_tag_name",
    proposed: "proposed_standard_format",
    unit: "units",
    system: "system",
    score: "_score",
    id: "_id"
  };

  const resultdata = { id, title, system, unit, score, proposed };
  return (
      <input type='checkbox' onChange={() => addFunc(resultdata)}/>
  );
};

Как видите, я пытался передать props в мою оболочку, но Я все еще не могу вызвать selectedData в моем Wrapper или в моем RenderItem. Любая помощь будет очень признательна.

1 Ответ

0 голосов
/ 20 июня 2020

renderItem={Wrapper(this.addFunc, this.state.selectedData )} вы не можете передавать таким образом свойства дочерним компонентам. Вы можете передать Props вот так 

<Wrapper 
  addFunc={this.addFunc}
  selectedData={this.selectedData}
 />
...