在React Native中将组件作为道具传递

Question

为了制作可定制的组件，我应该怎么做才能将组件作为道具传递给另一个组件。

我有一个标头组件，可以根据当前页面的操作对其进行自定义。

例如，对于自动完成搜索，我可能具有以下标头组件：

在另一种情况下，对于旅行搜索结果，我可能具有这样的标头组件：

我想构建一个组件，该组件将接受一个组件作为道具并将其呈现给当前组件。以本机方式做到这一点的最佳方法是什么？

Answer 1

您可以将组件作为道具或子代传递。第一种方法是这样的：

export default class Home extends Component{
    render(){
        return(
            <View>
                <PageComponent header = {<Header title = {".."}/>}/>
            </View>
        );
    }
}

export default class PageComponent extends Component{
    render(){
        return(
            <View>
                {this.props.header}
                <View>
                    ...
                </View>
            </View>
        );
    }
}

第二种方法是：

export default class Home extends Component{
    render(){
        return(
            <View>
                <PageComponent>
                    <Header title = {".."}/>
                </PageComponent>
            </View>
        );
    }
}
export default class PageComponent extends Component{
    render(){
        return(
            <View>
                {this.props.children}
                <View>
                    ...
                </View>
            </View>
        );
    }
}