使 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" />

然后在我的 Awesome 中使用

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

显然这不是办法，但我也没有什么好主意。

Answer 1

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

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

在我的子组件中：

export default class Awesome extends Component { 渲染（）{

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

}

使 Font Awesome 组件在 React 中可重用

Make Font Awesome component reusable in React

reactjs

react-component