使用（嵌套）道具值来引用另一个道具答案

【问题标题】：Use (nested) prop value to reference another prop使用（嵌套）道具值来引用另一个道具
【发布时间】：2020-08-18 00:14:48
【问题描述】：

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

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",
    }
  }
}

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

children: ["category", "title"]

在你的函数内部：

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

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

【讨论】：