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

Question

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

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

作品（returns“我的Post标题）：

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

不起作用（returns 未定义，预计 "The Category Title"）：

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

Answer 1

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

children: ["category", "title"]

在你的函数中：

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

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

Answer 2

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

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

Use (nested) prop value to reference another prop