编写一个ReactJS组件，该组件分支渲染。

Question

我有一个 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"）渲染在子组件中，我该如何实现？

- Ben Aston

Answer 1

必须返回一个有效的React元素（或null）。您可能已经返回了undefined、数组或其他无效对象。

我检查了我的项目，它运行正常...你的错误可能出现在其他地方...

---

另外，我希望将内容（这里是“foo”）呈现在子组件中。我该如何实现？

function H1({ importance, children }) {

  return importance === 'HIGH' 
    ? (<High>{children}</High>) 
    : (<Default>{children}</Default>);
}

---

更新

如果你想将所有属性传递给子组件，可以在props上使用对象扩展运算符：扩展属性

function H1(props) {

  return importance === 'HIGH' 
    ? (<High {...props} />) 
    : (<Default {...props} />)
  ;
}

- Hitmands