React - 使用样式组件传递道具

Question

我刚刚在styled-components 文档中读到以下错误,它将影响渲染时间.如果是这种情况,我如何重构代码并使用所需的道具来创建动态样式？

先感谢您.

标签组件

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

Answer 1

另一种方法是

const StyledDiv = styled.div.attrs((props: {color: string}) => props)`
    width: 100%;
    height: 100%;
    background-color: ${(props) => props.color};
`

//...

render() {
    return (
        <StyledDiv color="black">content...</StyledDiv>
    );
}

这样，就想要发送到样式组件中的 props 而言，您是类型安全的。（在 Typescript 中编码时很好）

Answer 2

您可以使用 Typescript 传递参数，如下所示：

<StyledPaper open={open} />    

...

const StyledPaper = styled(Paper)<{ open: boolean }>`
   top: ${p => (p.open ? 0 : 100)}%;
`;

Answer 3

我相信文档所说的是你应该避免在渲染组件中包含你的样式:

做这个

const StyledWrapper = styled.div`
  /* ... */
`

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>
}

INSTEAD OF THISEAD

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `

  return <StyledWrapper>{message}</StyledWrapper>
}

因为当组件的Props改变时会发生什么,然后组件将重新渲染并且样式将重新生成.因此将它保持分离是有意义的.

因此,如果您继续阅读基于道具的改编部分,他们会解释:

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的道具而不必告诉它任何东西.

对于您的场景,我想解决方案将是简单的:

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>

我根本没有测试过这个,所以请随意尝试一下,让我知道它是否适合你或者对你有用的东西!

Answer 4

对于带有功能组件的更简单的示例：

假设你有一个像多边形一样的箭头，并且需要其中两个指向不同的方向。所以你可以通过 props 传递旋转值

<Arrow rotates='none'/>
<Arrow rotates='180deg'/>

然后在组件箭头中，您必须像普通组件一样将道具传递给样式组件，但在样式组件中您必须像道具一样使用它：

import React from 'react';
import styled from "@emotion/styled";

const ArrowStyled = styled.div`
    background-color: rgba(255,255,255,0.9);
    width: 24px;
    height: 30px;
    clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);
    transform: rotate(${props => props.rotates});
`

const Arrow = ({rotates}) => {
    return (
        <ArrowStyled rotates={rotates}/>
    );
}

export default Arrow;