Javascript 编写用于分支渲染的ReactJS组件

我有一个

H1

组件：

<H1 importance={importance}>foo</H1>

但我得到：

必须返回有效的React元素（或null）。你可能有 返回未定义、数组或其他无效对象

为什么会这样

此外，我希望内容（此处为“foo”）在子组件内呈现。我怎样才能做到这一点

必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

我已经检查了我的项目，它运行得很好。。。你的错误可能在别处

---

此外，我希望内容（此处为“foo”）在子组件内呈现。我怎样才能做到这一点

函数H1（{重要性，子项}）{
返回重要性===‘高’
（{儿童}）
：（{儿童}）；
}

---

更新 如果要将所有道具传递给孩子们，则可以在道具上使用

对象扩展操作符

：

功能H1（道具）{
返回重要性===‘高’
? () 
: ()
;
}

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;