Question

我是新来的反应者，我试图了解通用语法的工作原理，不确定是否适合问这个问题。以下是我的简单标题组件代码。

export default class Title extends Component { 
    render () {
        const {children} = this.props;

        return (
          <View style={styles.header}>
            <Text style={styles.title}>{children}</Text>
          </View>
        )
    }
}

这是

const {children} = this.props;

等同于

const children = this.props.children;

如果是，则使用哪种正确形式？只是为了更好地理解反应的工作原理，此外，下面的方法还会尝试使道具的孩子成为孩子吗？

const {children} = this.props.children

Answer 1

此功能称为对象解构，它允许您获取对象的属性并将其方便地存储到变量中。例如：

const obj = {
 prop1: 1,
 prop2: 2
}

const {prop1, prop2} = obj;

console.log(prop1, prop2);

在您的示例中，将this.props对象的children属性拉到一个名为{children的const中。

const {children} = this.props;

等同于

const children = this.props.children;

但是，对象分解语法更紧凑，并且更容易扩展，例如，如果props具有名为foo的props：

const {children, foo} = this.props;

现在我们有一个孩子和foo的变量。

Answer 2

它称为对象分解。它不是特定于React

您可以像这样提取对象的属性。

这将为您提供未定义，因为孩子不包含孩子属性。

const {children} = this.props.children

但是，两种方法都很好。

有关详细信息，请阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 3

当对象只有一个属性时，例如

const obj = {
  propA: 5
}

两者之间没有太大区别

const propA = obj.propA和const { propA } = obj

但是，对于具有多个属性的对象，对象的分解变得有益（我们写得更少）：

const obj = {
  propA: 5,
  propbB: true,
  propC: 'some string'
}

// less code (and cleaner)
const { propA, propB, propC } = obj

// otherwise
const propA = obj.propA
const propB = obj.propB
const propC = obj.propC

const {children} = this.props vs const children = this.props.children

3 个答案: