Создать стилизованный компонент из сериализованной строки

Question

Можно ли создать стилизованный компонент из сериализованной строки?Нужно ли разбирать мою строку на фактические функции для поддержки интерполированных вариаций?Пример строки, которую я мог бы сохранить:

// this is a serialized string from storage:

background-color: black;

${p => p.white && css`
  background-color: white;
`}

Я хотел бы иметь возможность сделать что-то вроде этого:

const MyComp = styled.div`
  ${myComponentStringFromStorage}
`;

<MyComp white /> // works, but displays the black background

Это работает для базовых правил CSS, но пропускаетмои функции, поскольку они просто передаются как текст в строке, а не как настоящие функции.

Я предполагаю, что мне нужно написать синтаксический анализатор, чтобы разбить мою строку на реальные функции, которые я отправляю в функцию фабрики стилевых компонентов?

Интересно, есть ли в Styled Components встроенная вспомогательная функция?для этого, или если есть другой подход.

Answer 1

Вы можете использовать eval в сохраненной строке вместе с styled.div в качестве строки, чтобы создать из нее компонент.

const MyComp = eval("styled.div`" + myComponentStringFromStorage + "`");

Имейте в виду, что eval может быть опасными что это будет сделано во время выполнения, поэтому оно не будет работать в средах, которые не поддерживают строки шаблона.

const { css } = styled;

const myComponentStringFromStorage = [
  "background-color: black;\n",
  "\n",
  "${p => p.white && css`\n",
  "  background-color: white;\n",
  "`}"
].join("");

const MyComp = eval("styled.div`" + myComponentStringFromStorage + "`");

class App extends React.Component {
  render() {
    return <MyComp white>Foo</MyComp>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="root"></div>