Question

我正在代码中创建一组功能组件，以便任何人都可以在不了解样式化组件的情况下使用它：

const CustomizableButtonComponent = Styled.TouchableOpacity`
    width:${props => props.width}
    height: ${props => props.height}
    background-color:${props => props.backgroundColor}
    flex-direction:${props => props.flexDirection}
    padding: ${props => props.padding}
    flex: ${props => (props.flex ? props.flex : '0 1 auto')}
    align-items: center
`;

直接公开它的一个问题是它没有指出它真正需要的属性。因此，我在此之上创建了一个功能组件包装器：

export const ButtonWrapper = ({backgroundColor}) => (
  <CustomizableButtonComponent
    backgroundColor={backgroundColor}
    height={'70px'}
    width={'100%'}
    flexDirection={'row'}
    padding={'3px'}
  />
);

这明确表明它需要backgroundColor道具。但这出于某种原因不接受任何子元素。在摘要下方，请忽略文本子项，并且不进行渲染。

return (
    <View>
      <ButtonWrapper backgroundColor="white">
        <Text>Hello</Text>
        <Text>There!</Text>
      </ButtonWrapper>
    </View>
  );

但是类似的东西为什么起作用（为什么实际上是儿童文本被渲染）

export const ButtonWrapper1 = Styled.TouchableOpacity`
    width:100%
    height: 50px
    background-color:${props => props.backgroundColor}
    flex-direction:row
    padding: 3px
    flex: 0 1 auto
    align-items: center
`;

return (
    <View>
      <ButtonWrapper1 backgroundColor="white">
        <Text>Hello</Text>
        <Text>There!</Text>
      </ButtonWrapper1>
    </View>
  );

ReactNative StyledComponent忽略子级

0 个答案: