返回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。