[英]How to pass down props to function in ReactJS
I have an array called selectedData
as a state in my main Class.我在我的主要 Class 中有一个名为
selectedData
的数组作为 state。 This class calls a component called Wrapper
, and the Wrapper
calls a functional component called RenderItem
.这个 class 调用了一个名为
Wrapper
的组件,而Wrapper
调用了一个名为RenderItem
的功能组件。 I want to be able to use the selectedData
array within my RenderItem
function.我希望能够在我的
RenderItem
function 中使用selectedData
数组。
I know this might not be the most efficient way of calling the function, but I am using an open-source UI called ReactiveSearch to display results from my search, and the only way I managed to make it work till now is by calling Wrapper and then RenderItem.我知道这可能不是调用 function 的最有效方式,但我正在使用一个名为 ReactiveSearch 的开源 UI 来显示我的搜索结果,到目前为止,我设法让它工作的唯一方法是调用 Wrapper 和然后是渲染项。 I would like to avoid changing this as much as possible.
我想尽可能避免改变这一点。
A summary of my code is below:我的代码摘要如下:
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)}/>
);
};
As you can see, I tried passing in props to my Wrapper, but I still can't call the selectedData within my Wrapper
or within my RenderItem
.如您所见,我尝试将道具传递给 Wrapper,但我仍然无法在
Wrapper
或RenderItem
中调用 selectedData。 Any help will be really appreciated.任何帮助将不胜感激。
renderItem={Wrapper(this.addFunc, this.state.selectedData )}
you cannot pass props to child components this way. renderItem={Wrapper(this.addFunc, this.state.selectedData )}
你不能通过这种方式将道具传递给子组件。 You can pass Props like this你可以像这样传递道具
<Wrapper
addFunc={this.addFunc}
selectedData={this.selectedData}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.