reactjs - 使用（嵌套）道具值来引用另一个道具

Question

我正在尝试使用嵌套的道具值，然后使用该值动态获取另一个道具。这适用于浅层（第一级）道具，但当道具嵌套时它会失败。

function DynamicContent(props) {
  const content = props.data[props.children]
  return <span>{content}</span>
}

作品（返回“我的帖子标题）：

{
  children: ["postTitle"],
  data: {
    postTitle: "My Post Title",
    category: {
      title: "The Category Title",
    }
  }
}

不起作用（返回未定义，期望“类别标题”）：

{
  children: ["category.title"],
  data: {
    postTitle: "My Post Title",
    category: {
      title: "The Category Title",
    }
  }
}

score 0 · Accepted Answer

你不能这样做，但一个简单的解决方案是做这样的事情：

children: ["category", "title"]

在你的函数里面：

const content = props.data[props.children[0]][props.children[1]]

我认为，这不是更好的解决方案，但你有一个想法来实现你想要的，也许你可以分成两个函数，一个用于访问对象内部的属性，第二个用于访问子子对象到对象

score 0 · Accepted Answer

你做得很好，你做得对。你只需要一个简单的调整。使用eval你可以评估尽可能多的嵌套。

const path = 'props.data' + props.children;
const content = eval(path);

2 回答 2