从无状态组件/“功能组件”返回 null答案

【问题标题】：Return null from a stateless component/"functional component"从无状态组件/“功能组件”返回 null
【发布时间】：2016-02-15 18:28:22
【问题描述】：

我在 React 0.14 中有一个在 React 0.13 中工作的无状态功能组件，但现在返回以下错误：

在返回的组件实例上找不到render 方法：您可以忘记定义 render，从 a 返回 null/false 无状态组件，或尝试渲染类型为不是 React 组件的函数。

这是我的组件：

function ToggleDisplay(props) {
    //should render a <noscript> per React's implementation
    if(props.if === false) {
        // return <noscript></noscript>; //do I have to do this manually now?
        return null;
    }

    let style = {};
    if(shouldHide(props)) {
        style.display = 'none';
    }
    return (
        <span style={style} {...props} />
    );
}

我现在必须手动返回<noscript> 吗？有没有另一种方法可以在无状态组件中返回 null？

【问题讨论】：

为什么不在父级渲染？
还有npmjs.com/package/react-component-empty
@DominicTobias 我认为这应该是一个公认的答案。首先防止组件被渲染。

标签： reactjs

【解决方案1】：

从 React 15.0 开始，您可以从无状态功能组件返回 null。（见#5355）。再也不用回<noscript />?

使这成为可能的变化是 React 删除了对不继承自 React.Component 的组件类的支持，这意味着它们可以可靠地区分 React 组件（继承 React.Component 的类）和功能性无状态组件。因此，启用该功能的 PR 只涉及删除和简化实例化组件的 the code。

【讨论】：

错误信息真的是误导，为我解决了...有两个版本的 React 正在使用中

【解决方案2】：

看起来不是，这是 Javascript 中的技术限制。为了支持箭头函数和普通函数作为“组件”，React 需要知道我们是否可以在它们上调用 new。

只要是普通函数，我们就可以对所有内容调用 new 他们返回一个 ReactElement。但是，这对 null/false/string 返回值，我们也希望支持这些值。我们也不能在箭头函数上调用 new。同样，我们不能不调用新课程。

Relevant GitHub Issue

【讨论】：