react-native - 在响应 native 中传递组件作为 Prop

Question

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

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

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



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

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

Answer 1

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

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>
        );
    }
}