React —通过样式组件传递道具 [英] React — Passing props with styled-components
问题描述
我刚刚阅读了 styled-components
文档以下内容是错误的,它将影响渲染时间.如果是这种情况,我该如何重构代码并使用所需的道具来创建动态样式?
I just read in the styled-components
documentation that 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?
谢谢.
标签组件
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
推荐答案
我相信文档在说什么,您应该避免在渲染组件中包含样式:
I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component:
这样做
const StyledWrapper = styled.div`
/* ... */
`
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>
}
替代
const Wrapper = ({ message }) => {
// WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
const StyledWrapper = styled.div`
/* ... */
`
return <StyledWrapper>{message}</StyledWrapper>
}
因为发生的事情是当组件的Props更改时,组件将重新渲染并且样式将重新生成.因此,有必要将其分开.
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.
因此,如果您进一步阅读基于道具的适应部分,他们将对此进行解释:
So if you read further on to the Adapting based on props section, 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>
);
// }
之所以可行,是因为当您在X类中使用 Button 组件时,它将无需知道任何内容就能知道X类的道具.
this works because when you use the Button component in class X, it will know the props of class X without you having to tell it anything.
对于您的情况,我认为解决方案将很简单:
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!
这篇关于React —通过样式组件传递道具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!