javascript - 为什么 props 在情感 js 组件的不同实例之间共享？

Question

1. 为什么情感-js 似乎共享来自单独组件实例的 props？

<Button isDisabled={'true'} />
<Button />

const Button = styled.button`
  background-color: ${props => props.isDisabled !== 'true' ? 'green' : 'grey'};
`;

export default (props) => {
    return (<Button>Hello</Button>);
}

期望:第一个<Button/>是灰色的。第二个是绿色的。

现实: <Button/> 的两个实例是灰色的。

<小时/>

此外，这让我非常困惑，直到我注意到文档中的这个片段:

By default, Emotion passes all props to custom components and only props that are valid html attributes for string tags.

为什么仅传递属于有效字符串标签的属性？以下使用bool看起来这将是一个有效的用例。

<Button isDisabled={true} /> 

Answer 1

它不共享 Prop 。您只需要正确地传递它们即可。 有两种方法可以实现您想要的效果，要么使用适当的字符串，要么使用 bool 值:

字符串版本:

const Button = styled('button')`
  background-color: ${props => props.isDisabled !== 'true' ? 'green' : 'grey'};
`;

用法:

<Button isDisabled="true">grey</Button>
<Button>green</Button>

或者使用 bool 值(在这种情况下可能更好):

const Button = styled('button')`
  background-color: ${props => props.isDisabled ? 'grey' : 'green'};
`;

用法:

<Button isDisabled>Grey</Button>
<Button>green</Button>