Блог

У foo.js меня есть:

 import Bar from "./bar.js"

function Foo() {
    const [myProp, setMyProp] = useState("red");

    return(
        <div>
            <Bar prop={myProp}/>
        </div>
    )
}
 

У bar.js меня есть:

 import styled from "styled-components"

const MyStyledComponent = styled.h1`
    font-size: 2rem;
    color: props.color;
`

function Bar() {
    return(
        <MyStyledComponent/>
    )
}
 

Конечно, color: props.color это не работает вне функции Bar . Как мне получить доступ Bar к myProp свойству, не помещая MyStyledComponent внутрь функции и не жертвуя хорошими практиками?

1. Bar необходимо использовать переданные ему реквизиты и передавать их дочерним элементам.
2. MyStyledComponent необходимо правильно использовать переданный реквизит.

Код

 const MyStyledComponent = styled.h1`
  font-size: 2rem;
  color: ${(props) => props.color};
`;

function Bar({ prop }) {
  return <MyStyledComponent color={prop}>Test</MyStyledComponent>;
}

function Foo() {
  const [myProp, setMyProp] = useState("red");

  return (
    <div>
      <Bar prop={myProp} />
    </div>
  );
}
 

Вы можете ввести реквизит в свой стилизованный компонент:

 const MyStyledComponent = styled.h1`
    font-size: 2rem;
    color: ${props => props.color};
`

function Bar() {
    return(
        <MyStyledComponent color="red" />
    )
}