web-dev-qa-db-fra.com

React - Passage d'accessoires avec des composants stylés

Je viens de lire dans le styled-componentsdocumentation que ce qui suit est faux et cela affectera les temps de rendu. Si tel est le cas, comment puis-je refactoriser le code et utiliser les accessoires requis pour créer un style dynamique?

Merci d'avance.

Composant Onglet 

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
javascriptreactjsstyled-components
11
Diego Oriani

Je crois que la documentation indique que vous devriez éviter d'inclure vos styles dans le composant de rendu:

FAIRE CELA

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

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

AU LIEU DE CELA

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

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

Dans la mesure où ce qui se produit survient lorsque les accessoires du composant changent, le composant est rendu et le style est régénéré. Par conséquent, il est logique de le garder séparé.

Donc, si vous lisez plus loin dans la section Adaptation basée sur les accessoires, ils expliquent ceci:

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>
);

// }

cela fonctionne parce que lorsque vous utilisez le composant Button en classe X, il connaîtra les accessoires de la classe X sans que vous ayez à lui dire quoi que ce soit.

Pour votre scénario, j'imagine que la solution serait simplement:

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>

Je n'ai pas testé cela du tout, alors n'hésitez pas à l'essayer et laissez-moi savoir si cela fonctionne pour vous ou ce qui a fonctionné pour vous!

16
Drop Bear Dan

Considérez la documentation stylée sur les composants qui donne un exemple d'utilisation de reacts context api [2] pour différents thèmes.

[1] https://www.styled-components.com/docs/advanced

[2] https://reactjs.org/docs/context.html

1
Cisum Inas