REACT - 条件开关渲染，要识别的模式

Question

我刚刚看到了这种通过将对象作为call？ 或apply？ 传递给另一个对象的出色切换方法。这种模式在普通的Javascript中有一个名字吗？我想阅读它，以便我可以更好地理解它在 React 中的工作原理：

this.state = {
nav: content1,
}
render() {
return (
<section>
{{
content1: <content1 />,
content2: <content2 />,
content3: <content3 />,
}[this.state.nav]}
</section>
);
}

Answer 1

这里的JSX被认为是JSON被大括号{}包围的对象。

键和值用冒号分隔。 您可以使用点 (.( 表示法访问对象值：

myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;
You can also access the object values by using bracket ([]) notation:
myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];

Answer 2

这只是 JSX 中的一个对象。

{{
content1: <content1 />,
content2: <content2 />,
content3: <content3 />,
}[this.state.nav]}

与

{favSnack: “Apple”}[‘favSnack’]