是否有可能在反应渲染函数中返回空？

我有一个通知组件，我有一个超时设置。超时后我打电话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

是否有可能在反应渲染函数中返回空？

回答

相关问题