通过自定义组件将道具添加到样式组件中

Question

当我将自定义组件与Styled组件一起使用时，我试图传递一些道具。

这是我想关注的容器，我想通过道具改变弯曲方向：

const InputInnerContainer = styled.View`
width: 100%;
height: 42px;
padding-horizontal: 5px;
flex-direction: ${props => props.right ? "row-reverse": "row"};
align-items: center;
justify-content: space-between;
border-radius: 4px;
border-width: 1px;
background-color: ${inputBackgroundColor};
border: 2px solid ${inputBorderColor};
`;

这是我的自定义组件"；输入"：

const Input = ({ onChangeText, icon, value, label,iconPosition}) => {
return (
<InputContainer>
{label && <LabelText>{label}</LabelText>}
<InputInnerContainer {...iconPosition}>
<View>{icon && <LabelText>{icon}</LabelText>}</View>
<InputField onChangeText={onChangeText} value={value} />
</InputInnerContainer>
</InputContainer>
);
};

这就是我称之为自定义组件的地方：

<Input
label="Password"
onChangeText={(text) => onChangeText(text)}
value={value}
icon="HIDE"
iconPosition="right"
/>

我想传递的道具是"；iconPosition"；。但我不知道如何将其传递到Styled组件中。我对Styled组件还是比较陌生的，所以任何想法都是受欢迎的。

Answer 1

尝试不破坏它。不是这样：

<InputInnerContainer {...iconPosition}/>

但这种方式：

<InputInnerContainer iconPosition={iconPosition}/>

您还需要更新您的样式组件：

const InputInnerContainer = styled.View`
...
flex-direction: ${props => props.iconPosition === "right" ? "row-reverse" : "row"}
...
`