Компонент в стиле эмоций и React.forwardRef не работают вместе - PullRequest
Новая
       15

Компонент в стиле эмоций и React.forwardRef не работают вместе

1 голос
/ 25 марта 2019

Я пытаюсь написать два компонента в стиле React (с Emotion 10), указав некоторую настраиваемую логику рендеринга в один из них и сохранив возможность извлекать их «ссылки».

Это мой код: 

const Foo = styled(props => <div {...props} />)`
  color: red;
`;

// Here I **want** to use the component selector
// https://emotion.sh/docs/styled#targeting-another-emotion-component
const Bar = styled.div`
  ${Foo} {
    background-color: yellow;
  }
`;

const App = () => {
  const ref = React.useRef();
  return <Bar><Foo ref={ref}>foo</Foo></Bar>;
};

ReactDOM.render(<App />, document.body);

Проблема с этим кодом заключается в том, что React выдает это предупреждение:

Предупреждение: компонентам функций нельзя давать ссылки.Попытки получить доступ к этой ссылке не удастся.Вы хотели использовать React.forwardRef ()?

Как мы знаем, компоненты в стиле Emotion используют React.forwardRef, чтобы позволить разработчикам использовать для них свойство ref.Но, похоже, это не сработает, как только вы переключитесь на собственный метод рендеринга.

Затем, если я (неловко [1] ) преобразую его в использование React.forwardRef, я получу следующее:

const Foo = React.forwardRef((props, ref) => {
  const Component = styled(props => <div {...props} />)`
    color: red;
  `;
  return <Component {...props} ref={ref} />;
});

const Bar = styled.div`
  ${Foo} {
    background-color: yellow;
  }
`;

const App = () => {
  const ref = React.useRef();
  return <Bar><Foo ref={ref}>foo</Foo></Bar>;
};

ReactDOM.render(<App />, document.body);

Но затем я получаю другую ошибку:

TypeError: Невозможно преобразовать значение Symbol в строку

Что происходит, когдаЯ пытаюсь использовать ${Foo}.Возможно, потому что Emotion ожидает стилизованный компонент, но сейчас я предоставляю forwardRef компонент.

Вот CodeSandbox, чтобы было проще играть с моим кодом:
https://codesandbox.io/s/7ylnlovlz6

Итак, как правильно добиться того, что я пытаюсь получить?

[1]: Я знаю, что определение компонента внутри рендера заставит компонент повторно рендериться при каждом рендеринге, но этоне имеет значения в этом контексте.

...