返回null从一个无状态的组件/“功能组件”

Question

我在阵营0.14是曾在阵营0.13无国籍功能组件，但现在返回以下错误：

No render method found on the returned component instance: you may have forgotten to define render , returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.

这是我的组件：

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的另一种方法？

Answer 1

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

We can call new on everything if they're plain functions as long as they return a ReactElement. However, that won't work for null/false/string return values and we want to support those too. We also can't call new on arrow functions. Likewise, we can't NOT call new on classes.

Relevant GitHub Issue

Answer 2

由于发生反应15.0，你可以从一个无状态的功能组件返回null。 （见#5355）。没有更多的返回<noscript />

---

，使得这可能是反应组件类删除支持，不从React.Component继承，这意味着它们能够可靠区分反应的组分（继承React.Component类）和变化功能无状态组件。因此，启用功能的PR只需要移除和简化实例化组件的the code。