1

我在 React 中遇到了一个让我感到困惑的问题。

我想创建基本上是围绕其子级的包装器的组件。假设是一个简单的 Button 组件。

<Button {...props} circular radius="small">
  <Icon type="close" />
</Button>

这样做时，我收到以下错误：

Cannot convert a Symbol value to a string
TypeError: Cannot convert a Symbol value to a string
    at http://localhost:9009/static/preview.bundle.js:2027:45
    at Array.map (native)
    at objToCss (http://localhost:9009/static/preview.bundle.js:2025:30)
    at http://localhost:9009/static/preview.bundle.js:2026:33
    at Array.map (native)
    at objToCss (http://localhost:9009/static/preview.bundle.js:2025:30)
    at http://localhost:9009/static/preview.bundle.js:2050:42
    at Array.reduce (native)
    at flatten (http://localhost:9009/static/preview.bundle.js:2033:17)
    at http://localhost:9009/static/preview.bundle.js:2045:63

然而，这是最疯狂的部分，当我渲染多个孩子，即孩子时，它会神奇地起作用。

<Button {...props} circular radius="small">
  <Icon type="close" />
  <Icon type="close" />
</Button>

=> 没有错误

世界上到底发生了什么？为什么 React 试图将我的 React 元素（它首先包装为符号）转换为字符串？符号到底是什么？如果有人能启发我，那就太棒了:) 现在我渲染一个空<span />来规避这个问题。

IE

<Button {...props} circular radius="small">
  <Icon type="close" />
  <span />
</Button>

现在这是我的<Button />组件。我知道我可以直接导出 RawButton。但我以后想做的是组合组件。目前，我只能通过渲染至少 2 个孩子来运行它。我不明白如何渲染一个孩子会导致这个问题-.-

const RawButton = styled.button`
  border-radius: ${props => (props.circular ? '50%' : BORDER_RADIUS)};
`;

export default (props) =>
  <RawButton {...props}>
    <span />
    {props.children}
  </RawButton>
4

0 回答 0