Question

我对React很新。我想创建自定义组件，其中包含多个自定义组件。以下是代码

const { item, to, onClick, width, style, ...otherProps } = props;
const h = width ? (width*IMAGE_RATIO)+'px' : 'auto';
const w = width ? width+'px' : 'auto';
<StackView
  style={{ width: w, ...style }}
  {...otherProps}
>
  <Container
    to={to}
    onClick={onClick}
    item={item}
    style={{ width: w, height: h }}
  />
  <ClickableText
    to={to}
    onClick={onClick}
    typography={typography.t15}
    color={color.red}
    activeColor={color.redDark}
    style={{ lineHeight: '12px' }}
  >
    {item.title}
  </ClickableText>
</StackView>

在Container组件和ClickableText组件props.style内部undefined尝试了Google此问题，但一无所获。有人能帮助我吗？感谢

修改

发现了{p> Michael的答案。问题出在我的StackView组件中，我在克隆它们时覆盖了儿童风格

Answer 1

我确定Container和ClickableText组件的父级有问题。

请检查父组件StackView。如果你覆盖了儿童风格，那就是这个混乱的根本问题。

祝你好运。

Answer 2

如果您的组件不是无状态功能组件，则需要使用this.props.style访问该属性。

有关组件类型的更多信息： https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c

React Child组件有undefined props.style

2 个答案: