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

和我的孩子组件：

导出默认类Awesome extends Component { 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>;
    }
}

}

在React中使Font Awesome组件可重用

1 个答案: