我有一个 H1
组件:
<H1 importance={importance}>foo</H1>
我希望 H1
的呈现取决于importance
属性。
因此,我尝试了以下代码:
import styled from 'styled-components';
const Default = styled.h1`
font-size: 1.2em;
`;
const High = styled.h1`
font-size: 2.2em;
`;
function H1({ importance }) {
return importance === 'HIGH' ?
(<High props={...props}/>) :
(<Default props={...props}/>);
}
export default H1;
但我收到了以下信息:
必须返回有效的React元素(或null)。您可能已经返回了undefined、数组或其他无效的对象。
为什么会这样呢?
另外,我想要将内容(在这里是"foo")渲染在子组件中,我该如何实现?