将样式应用于扩展的反应本机组件的推荐方法是什么?

Question

我已经扩展了文本组件，以便具有自定义字体的可重复使用的文本组件。

我的自定义组件应接受传递给它的样式并向其添加自定义字体。

我目前正在这样做：

mytext.js

import React from 'react'
import {
    Text,
    StyleSheet
} from 'react-native';

export default class MyText extends React.Component {
    render() {
        const style =
            Object.assign( {},
                StyleSheet.flatten(this.props.style),
                {fontFamily: "My Font"}
            );
        return (
            <Text style={style}>
                {this.props.children}
            </Text>
        );
    }
}

虽然这可以按预期工作，但每次都必须使样式表扁平似乎是错误的。以上是一个琐碎的例子，我可以想到可以使用这种模式的其他组件。因此，我想确保我不要忽略更合适的方法。

Answer 1

很好，这取决于您要自定义多少。在这种情况下，如果它只是另一个字体，则可能是

import React from 'react'
import {
    Text,
    StyleSheet
} from 'react-native';
import _ from 'lodash';

export default class MyText extends React.Component {
    render() {
        const filteredProps = _.omit(this.props, 'style'); 
        return (
            <Text style={[{fontFamily: "My Font"}, this.props.style]} {...filteredProps} />
        );
    }
}