是否有可能在反應渲染函數中返回空？

我有一個通知組件，我有一個超時設置。超時後我打電話this.setState({isTimeout:true})。是否有可能在反應渲染函數中返回空？

我想要做的是，如果已經超時，我只想呈現什麼：

render() { 
    let finalClasses = "" + (this.state.classes || ""); 
    if (isTimeout){ 
     return(); // here has some syntax error 
    } 
    return (<div>{this.props.children}</div>); 
    }

的問題是：回報（）; //這裏有一些語法錯誤

來源

2017-02-07 Xin

是的，你可以，但不是一片空白，只返回null如果你不這樣做想要render任何東西，像這樣：

return (null);

按DOC：

booleans (true/false), null, and undefined是有效的兒童，它們將被忽略意味着他們根本不渲染。

所有這些JSX表情會使同一件事：

<div /> 

<div></div> 

<div>{false}</div> 

<div>{null}</div> 

<div>{undefined}</div> 

<div>{true}</div>

例子：

只有奇數值將得到呈現，因爲偶數值，我們正在返回null。

const App = ({ number }) => { 
 
    if(number%2) { 
 
    return (
 
     <div> 
 
     Number: {number} 
 
     </div> 
 
    ) 
 
    } 
 
    
 
    return (null);   //===> notice here, returning null for even values 
 
} 
 

 
const data = [1,2,3,4,5,6]; 
 

 
ReactDOM.render(
 
    <div> 
 
    {data.map(el => <App key={el} number={el} />)} 
 
    </div>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app' />

來源

2017-02-07 06:36:44

你能盡力幫助解決我的問題？我保證我會給你投票。 https://stackoverflow.com/questions/49179234/cannot-proper-handle-error-in-ajax-from-rxjs – user

@用戶我檢查了問題，抱歉沒有問題的原因，我認爲你得到了來自某人的解答:) –

是的，你可以從React渲染方法返回一個空值。

可以返回下列任一：false, null, undefined, or true

按照docs：

false，null，undefined和true是有效的兒童。他們根本不渲染。

你可以寫

return null; or 
return false; or 
return true; or 
return undefined;

然而return null是最優選的，因爲它意味着沒有返回

來源

2017-02-07 06:33:10

是否有可能在反應渲染函數中返回空？

回答

相關問題