React Native 之{...this.props}解惑

一、 {...this.props}之惑

接触rn也有段时间了，有{...this.props}这么个东东老是出现在眼前，但终究不知道是干什么用的，今天就来记录一下。

...this.props介绍

props是RN中的属性，由父组件指定，子组件接收。至于...this.props则是props提供的语法糖，可以将父组件中的属性赋值给子组件(我的理解就是变相的继承咯)。

用法

假设我们要定义一个打招呼的组件

定义组件

export default class SayHello extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <Text {...this.props}>Hello {this.props.name}</Text>
        );
    };
}

调用组件

render() {
        return(
            <SayHello
                name = 'World'
                suppressHighlighting = {true} />
        );
    };

注意：suppressHighlighting是父组件的属性，SayHello组件只定义了name一个属性