Javascript 如何从子组件调用父组件中的函数

在我的主类中有一个名为

addFunc

的函数。此类调用

RenderItem

函数来显示项目列表。每个项目都有一个

onClick

，它应该执行

addFunc

函数

我无法从我的

RenderItem

函数中调用

addFunc

函数，因为它们位于不同的组件中。我该怎么过这关

这是我的代码摘要：

const selectedData = []

class Search extends Component {
    constructor(props) {
      super(props);
      this.addFunc = this.addFunc.bind(this);
    }

    addFunc(resultdata){
        console.log(resultdata)
        selectedData = [...selectedData, resultdata]
        console.log(selectedData)
      };
    render() {
      return (
            <ReactiveList
            componentId="results"
            dataField="_score"
            pagination={true}
            react={{
                and: ["system", "grouping", "unit", "search"]
            }}
            size={10}
            noResults="No results were found..."
            renderItem={RenderItem}
            />
      );


const RenderItem = (res, addFunc) => {
    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 (
            <Button
                shape="circle"
                icon={<CheckOutlined />}
                style={{ marginRight: "5px" }}
                onClick={this.addFunc()}
            />
      );
  }

const selectedData=[]
类搜索扩展组件{
建造师（道具）{
超级（道具）；
this.addFunc=this.addFunc.bind（this）；
}
addFunc（结果数据）{
console.log（resultdata）
selectedData=[…selectedData，resultdata]
console.log（已选择数据）
};
render（）{
返回(
);
常量RenderItem=（res，addFunc）=>{
设{单元、标题、系统、分数、提议的id}={
标题：“制造商标签名称”，
提议：“提议的标准格式”，
单位：“单位”，
系统：“系统”，
分数：“_分数”，
id:“\u id”
};
const resultdata={id，title，system，unit，score，provided}
返回(
);
}

您可以将父组件中定义的回调函数作为道具传递给子组件

class Parent extends React.Component {
sayHello(name) => {
      console.log("Hello " + name)
}
render() {
        return <Child1 parentCallback = {this.sayHello}/>
    }
}

class Child1 extends React.Component{
componentDidMount() {
   this.props.parentCallback("Foo")
}
render() { 
    return <span>child component</span>
    }
};

类父级扩展React.Component{
您好（姓名）=>{
console.log（“Hello”+name）
}
render（）{
回来
}
}

然后从子组件调用它

class Parent extends React.Component {
sayHello(name) => {
      console.log("Hello " + name)
}
render() {
        return <Child1 parentCallback = {this.sayHello}/>
    }
}

class Child1 extends React.Component{
componentDidMount() {
   this.props.parentCallback("Foo")
}
render() { 
    return <span>child component</span>
    }
};

类Child1扩展了React.Component{ componentDidMount（）{ this.props.parentCallback（“Foo”） } render（）{ 返回子组件 } };

---

您可以使用另一个组件包装

RenderItem

组件，然后对其进行渲染

const Wrapper = cb => {
  return (res, triggerClickAnalytics) => (
    <RenderItem
      res={res}
      triggerClickAnalytics={triggerClickAnalytics}
      addFunc={cb}
    />
  );
};

---

请参阅沙盒：

什么是

反应列表

？我正在使用一个名为Elasticsearch的开源软件构建一个搜索引擎，这是搜索结果的来源。反应搜索只是显示搜索结果的UI。我不认为在这种情况下会有什么不同。好吧，我有一些东西，但我不确定你是怎么做的将内容传递到

RenderItem

你有这个`RenderItem={RenderItem}`但是你在哪里传递道具给它呢？我正在使用一个名为ElasticSearch的开源软件上传我的数据并在其中搜索。对于UI，我使用另一个名为ReactiveSearch（）的开源UI。因此，结果来自我上传的数据库，RenderItem函数使用我定义的变量调用它们。如果有帮助的话，我已经在这里的CodeSandbox中上传了我的全部代码：我的子组件是一个功能组件，而不是一个类，因此我认为我不能在其中使用

componentDidMount

。另外，parentCal应该做什么在我的情况下调用lback？这非常有效，非常感谢。你不知道我尝试了多长时间。如果可以，你能帮我将状态添加到我的函数中，以便它可以显示所有单击结果的数据吗？我在这里问了一个新问题：