Question

因此，我要导入自定义组件TextButton并将其包装在另一个OutlinedButton中。我导出类OutlinedButton，希望同时看到通过的道具和要渲染的新样式。但是，仅正确渲染了道具。我添加的额外样式根本没有出现。为什么会发生这种情况？

import React, { Component } from 'react';
import TextButton from './TextButton';
class OutlinedButton extends Component {
    render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

export default OutlinedButton;

TextButton类（有点长）

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';

class TextButton extends Component {    
    constructor(props) {
        super(props);

        this.state = {};
    }

    componentWillMount() {}

    componentWillReceiveProps(newProps) {
        if (newProps.theme !== this.props.theme) {
            this.determineTheme(newProps.theme);
        }
        if (newProps.size !== this.props.size) {
            this.determineSize(newProps.size);
        }
    }

    // set the theme
    determineTheme = function (theme) {
        if (theme === 'primary') {
            return {
                color: '#0098EE'
            };
        } else if (theme === 'secondary') {
            return {
                color: '#E70050'
            };
        } else if (theme === 'default') {
            return {
                color: '#E0E0E0'
            };
        } 

        return {
            color: '#E0E0E0'
        };
    }

    // set the size
    determineSize = function (size) {
        if (size === 'small') {
            return {
                fontSize: 16
            };
        } else if (size === 'medium') {
            return {
                fontSize: 22
            };
        } else if (size === 'large') {
            return {
                fontSize: 28
            };
        }

        return {
            fontSize: 22
        };
    }

    render() {
        const { onPress, children, theme, size } = this.props;

        return (
            <TouchableOpacity onPress={onPress}>
                <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
            </TouchableOpacity>
        );
    }
}

TextButton.propTypes = {
    onPress: PropTypes.func,
    title: PropTypes.string,
    theme: PropTypes.string,
    size: PropTypes.string
};

export default TextButton;

Answer 1

您没有使用传递到style组件的TextButton道具：

render() {
  const { onPress, children, theme, size, style } = this.props;

  return (
    <TouchableOpacity onPress={onPress} style={style}>
      <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
    </TouchableOpacity>
  );
}

Answer 2

在<TextButton>组件中按如下方式设置样式时，您不是在组件上设置样式，而是将其作为道具传递给组件。因此，您必须以{。<TextButton>}的形式访问this.props.style，并将其应用到子组件中，如下面的Tholl所述。希望你明白了。

 render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

简单示例：https://codesandbox.io/s/wn9455x58

样式导入的自定义组件

2 个答案: