Используйте (вложенное) значение реквизита для ссылки на другой реквизит

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

Answer 1

У тебя все хорошо, ты все сделал правильно. Вам нужно просто настроить. Используя eval, вы можете оценить столько вложений, сколько хотите.

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

Answer 2

Вы не можете сделать это, но простое решение состоит в том, чтобы сделать что-то вроде этого:

children: ["category", "title"]

А внутри вашей функции:

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

Полагаю, это не лучшее решение, но у вас есть идея для достижения того, что вы хотите, может быть, вы можете разделить на две функции, одну для доступа к свойству внутри объекта, а другую для доступа к дочернему дочернему объекту