reactjs - 使 Font Awesome 组件在 React 中可重用

Question

有没有办法让我的组件可重用？

我正在使用 react-native-fontawesome npm

这是原始组件：

export default class Awesome extends Component {
    render() {
        return (
            <View>
                <TouchableHighlight>
                    <Text
                        style={{ margin: 10, fontSize: 15, textAlign: 'left' }}
                    >
                        <FontAwesome>{Icons.chevronLeft}</FontAwesome>//I want to change this line
                        Text
                    </Text>
                </TouchableHighlight>
            </View>
        );
    } }

我想传入我的父组件，例如：

 <Awesome icon="chevronLeft" />

然后在我很棒的使用中

 <FontAwesome>{Icons.this.props.icon}</FontAwesome>

显然这不是这样做的方法，但我没有任何好主意。

Answer 1

找到了方法，我可以使用switch语句

<Awesome icon="Back" />
<Awesome icon="Heart" />
<Awesome icon="Share" />
<Awesome icon="More" />

在我的子组件中：

导出默认类 Awesome 扩展组件 { render() {

    switch (this.props.icon) {
        case 'Back':
            return <FontAwesome>{Icons.chevronLeft}</FontAwesome>;
        case 'Heart':
            return <FontAwesome>{Icons.heart}</FontAwesome>;
        case 'Share':
            return <FontAwesome>{Icons.share}</FontAwesome>;
        case 'More':
            return <FontAwesome>{Icons.ellipsisH}</FontAwesome>;

        default:
            return <Text>HI</Text>;
    }
}

}