Javascript React - 使用样式组件传递道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52321539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React — Passing props with styled-components
提问by Diego Oriani
I just read in the styled-componentsdocumentationthat the following is wrong and it will affect render times. If that is the case, how can I refactor the code and use the required props to create a dynamic style?
我刚刚在styled-components文档中读到以下内容是错误的，它会影响渲染时间。如果是这种情况，我该如何重构代码并使用所需的道具来创建动态样式？
Thank you in advance.
先感谢您。
Tab component
标签组件
import React from 'react'
import styled from 'styled-components'
const Tab = ({ onClick, isSelected, children }) => {
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (isSelected ? `white` : `black`)};
background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (isSelected ? 'default' : `pointer`)};
`
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
export default Tab
回答by Drop Bear Dan
I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component:
我相信文档所说的是你应该避免在渲染组件中包含你的样式：
DO THIS
做这个
const StyledWrapper = styled.div`
/* ... */
`
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>
}
INSTEAD OF THIS
而不是这个
const Wrapper = ({ message }) => {
// WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
const StyledWrapper = styled.div`
/* ... */
`
return <StyledWrapper>{message}</StyledWrapper>
}
Because what happens is when the component's Props changes, then the component will re-render and the style will regenerate. Therefore it makes sense to keep it separate.
因为当组件的 Props 发生变化时，组件将重新渲染并且样式将重新生成。因此，将其分开是有意义的。
So if you read further on to the Adapting based on propssection, they explain this:
因此，如果您进一步阅读基于道具的改编部分，他们会解释这一点：
const Button = styled.button`
/* Adapt the colours based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// class X extends React.Component {
// ...
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
// }
this works because when you use the Buttoncomponent in class X, it will know the props of class X without you having to tell it anything.
这是有效的，因为当您在 X 类中使用Button组件时，它会知道 X 类的道具，而无需告诉它任何事情。
For your scenario, I imagine the solution would be simply:
对于您的情况，我想解决方案很简单：
const TabWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
padding: 100px;
margin: 1px;
font-size: 3em;
color: ${props => (props.isSelected ? `white` : `black`)};
background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;
const Tab = ({ onClick, isSelected, children }) => {
return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}
const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>
I haven't tested this at all, so please feel free to try it out and let me know if it works for you or whatever worked for you!
我根本没有测试过这个，所以请随意尝试一下，让我知道它是否适合你或任何对你有用的东西！
回答by Cisum Inas
Consider styled components documentation gives example of using reacts context api [2] for different themes.
考虑样式组件文档给出了针对不同主题使用 reacts context api [2] 的示例。
[1] https://www.styled-components.com/docs/advanced
[1] https://www.styled-components.com/docs/advanced
