我在 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>