你在这里问的其实和 React 没有关系，它和 Javascript: Destructuring assignment 有关系。

对于对象，您可以像这样销毁属性：

const obj = {
  name: "foo",
};

const { name } = obj;
console.log( name );

const name2 = obj.name;
console.log( name2 );

以上，两个任务是相等的。第一个是第二个的简写。

对于您的示例：

const { label } = this.props.rune.name;

在这里，有一个this.props.rune.name.label属性，您正在从this.props.rune.name. 这等于：

const label = this.props.rune.name.label;

实际上不

const label = this.props.rune.name;

正如你所尝试的。

React 与此语法相关的部分是我们在 React 世界中经常看到它。喜欢：

render() {
    const { foo, bar } = this.props;
    const { fizz, buzz } = this.state;
    return (
      <p>A {foo} goes to {bar} and orders a {fizz} without {buzz}</p>; 
    )   
}

或者

const AComponent = ( { foo, bar } ) => (
  <p>{foo} loves {bar} in programming world.</p>
);

一个警告。在处理嵌套属性以进行破坏时，小心很重要。正如@Tyler Sebastian 在评论中解释的那样，它null不安全。

const data = { obj: { name : "foo"} };
const { obj: { name } } = data;

这是可以的，但是如果我们在那里有一个错字，或者如果我们尝试使用当时不存在的属性，我们会得到一个，error因为我们试图从一个属性中破坏一个属性undefined。

const data = { obj: { name : "foo"} };
const { objx: { name } } = data;

这会引发错误。感谢@Tyler Sebastian 的评论。

尝试使用此代码

render() {
  console.log("Prop.runes.name: " + this.props.rune.name);
  const label = this.props.rune.name.label;
  console.log("Label: " + label);
  ...
}

您需要声明没有 { } 的变量标签

花括号用于解构

你可以在这里查看

深度解构

let {x} = {a: 10, b: 20, c: 30, d: 40}
console.log(x) // undefined

let {b} = {a: 10, b: 20, c: 30, d: 40}
console.log(b) // 10

console.log(c) // Error: c is not defined

本质上，const { label } = this.props;未定义是因为对象this.props没有label属性，因此无法匹配它，根据我的x示例，但在b示例中它确实匹配了一个属性，因此它被正确分配。