styled-components - 从序列化字符串生成样式化组件

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>