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

Question

我是 React 新手，我正在尝试了解一般语法的工作原理，但不确定在这里提问是否合适。以下是我的一个简单标题组件的代码。

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;

如果是这样，使用哪种形式是正确的？只是为了更好地理解 React 的工作原理，此外，以下是否会尝试获取 Prop 的 child 的 child ？

const {children} = this.props.children

Answer 1

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

const obj = {
 prop1: 1,
 prop2: 2
}

const {prop1, prop2} = obj;

console.log(prop1, prop2);

在您的示例中，children 属性是从 this.props 对象中提取的，并放入名为 children 的 const 中。

const {children} = this.props;

相当于

const children = this.props.children;

然而，对象解构语法更紧凑并且更容易扩展，例如，如果 props 有一个名为 foo 的 prop:

const {children, foo} = this.props;

现在我们有一个包含 children 和 foo 的变量。