时间戳

首页 > 解决方案 > React - 基于数组的渲染组件 - 如何在 mongoDB 中包含来自父级的函数？

reactjs - React - 基于数组的渲染组件 - 如何在 mongoDB 中包含来自父级的函数？

问题描述

我想在我的 MongoDB 中存储一个分配给父函数的 props 值，以便我可以基于该数组渲染组件，并且每个组件都有自己的函数。

我有一个像这样的 JSON，我从我的 mongoDB 获得然后存储在this.state.people

{

    "_id": "60496f4e6478022895c0b1da",
    "name": "Peter",
    "imagepath": "./img/Peter.png",

},
{
    "_id": "60496f4e6478022895c0b1da",
    "name": "Tim",
    "imagepath": "./img/Tim.png",
}

我将状态传递给子组件并使用以下内容渲染组件：

{props.people.map( result =>
  <PeopleComponent
  key={result._id}
  name={result.name}
  imagepath={result.imagepath}
  />
)}

到目前为止效果很好。

现在我无法解决的问题：在我的父组件 App.js 中，我有函数doSomethingWithPeter()和doSomethingWithTim(). 如何将这些函数包含在内.map，以便在单击按钮时实际调用父函数？

我尝试在数据库中添加一个附加条目，添加：

"_id": "60496f4e6478022895c0b1da",
"name": "Tim",
"imagepath": "./img/Tim.png",
"function": "props.doSomethingWithTim()"

然后将其映射为：

{props.people.map( result =>
  <PeopleComponent
  key={result._id}
  name={result.name}
  imagepath={result.imagepath}
  function={result.function}


  />)}

但是后来我Expected an assignment or function call and instead saw an expression 通过道具传递了函数，并且还尝试将它绑定到 App.js 中，this.props.doSomethingWithTim = this.props.doSomethingWithTim.bind(this)但不知道我还能尝试什么。提前致谢

标签： reactjsmongodb

解决方案

您可能应该找到另一种方法来做到这一点，也许通过存储一个简单的值允许您选择正确的函数来调用？

也许您可以尝试使用 eval，但它是一个非常不安全的功能？ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

function ParentPeopleComponent({people, doSomeStuff1, doSomeStuff2}) {
    return people.map(p =>
        <PeopleComponent
            // p={function: 'doSomeStuff1'}
            onSomething={() => eval(p.function)()}
        />
    )
}

推荐阅读