web-dev-qa-db-ja.com

React —スタイル付きコンポーネントで小道具を渡す

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

ドキュメントが言っていることは、レンダリングコンポーネント内にスタイルを含めることを避けるべきだということです。

これを行う

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 based on 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>

私はこれをまったくテストしていませんので、お気軽に試してみてください。

16
Drop Bear Dan

スタイル付きコンポーネントのドキュメントを検討して、さまざまなテーマに反応コンテキストAPI [2]を使用する例を示します。

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

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

1
Cisum Inas