[英]Style Imported Custom Component
So I'm importing a custom component TextButton
and packaging it inside of another OutlinedButton
. 所以我要导入一个自定义组件
TextButton
并将其包装在另一个OutlinedButton
。 I export the class OutlinedButton
expecting to see both the props passed and the new styling added to be rendered. 我导出了
OutlinedButton
类,希望同时看到通过的道具和要渲染的新样式。 However, only the props are being correctly rendered. 但是,仅正确渲染了道具。 The extra styling that I added does not appear at all.
我添加的额外样式根本没有出现。 Any thoughts as to why this occurs?
有什么想法为什么会发生这种情况?
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 class (it's a bit long) 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;
You are not using the style
prop passed down to your TextButton
component: 您没有使用传递给
TextButton
组件的style
道具:
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>
);
}
When you set style as below in <TextButton>
Component, you are not setting the style on the component, but passing it as props to the component. 在
<TextButton>
组件中按如下所示设置样式时,不是在组件上设置样式,而是将其作为道具传递给组件。 So you have to access it in <TextButton>
as this.props.style and apply it in the child component as Tholl mentioned below. 因此,您必须在
<TextButton>
以this.props.style的形式访问它,并将其应用到子组件中,如下面的Tholl所述。 Hope you got it. 希望你明白了。
render() {
return (
<TextButton {...this.props} style={styles.outlineButtonStyle} />
);
}
}
const styles = {
outlineButtonStyle: {
borderWidth: 1
}
};
SImple example: https://codesandbox.io/s/wn9455x58 示例示例: https ://codesandbox.io/s/wn9455x58
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.