我有一个通知组件，我有一个超时设置。超时后我打电话给this.setState({isTimeout:true})。
我想要做的是如果已经超时，我只想不渲染：
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}
问题是：
返回(); // 这里有一些语法错误
【问题讨论】：
标签： reactjs
是的，你可以，但是如果你不想 render 来自组件的任何东西，而不是空白，只需返回 null，就像这样：
return (null);
另一个重要的一点是，在 JSX 内部，如果你有条件地渲染元素，那么在 condition=false 的情况下，你可以返回这些值中的任何一个 false, null, undefined, true。根据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' />【讨论】：
return null 和 return (null) 没有区别，它们是一样的 :)
return，那么 React 会报错。所以return null 是必需的。
有些答案略有不正确，并指向文档的错误部分：
如果你想让一个组件什么都不渲染，只需要返回null，就像doc一样：
在极少数情况下，您可能希望组件隐藏自己，即使它 由另一个组件渲染。为此，返回 null 而不是 它的渲染输出。
例如，如果您尝试返回undefined，则会收到以下错误：
渲染没有返回任何内容。这通常意味着退货 声明丢失。或者，不渲染任何内容，返回 null。
正如其他答案所指出的那样，null、true、false 和 undefined 是有效的子级，对于条件渲染 inside 你的 jsx 很有用，但你想要你的组件不隐藏/渲染，只返回null。
【讨论】：
是的，你可以从 React 渲染方法返回一个空值。
您可以返回以下任何内容：false, null, undefined, or true
根据docs：
false、null、undefined和true是有效的子级。他们 根本不渲染。
你可以写
return null; or
return false; or
return true; or
return <div>{undefined}</div>;
但是return null 是最首选的，因为它表示没有返回任何内容
【讨论】：
有点跑题了，但是如果你曾经需要一个从不渲染任何东西的基于类的组件，并且你很乐意使用一些尚未标准化的 ES 语法，你可能想去：
render = () => null
这基本上是一种箭头方法，目前需要transform-class-properties Babel 插件。 React 不会让你定义一个没有 render 函数的组件，这是我能想到的满足这个要求的最简洁的形式。
我目前在从react-router 文档借用的ScrollToTop 变体中使用此技巧。在我的例子中，只有一个组件实例并且它不渲染任何东西，所以“render null”的简短形式很适合在那里。
【讨论】：
如果您使用的是 Typescript，并且您的组件/函数的返回类型为 React.Element，您将收到以下错误。
类型 'null' 不能分配给类型 'ReactElement
'.
解决方案是React.Fragment。
return <React.Fragment />
或
return <></>
【讨论】：
对于那些遇到这个问题的开发人员，他们会检查从哪里可以从组件返回 null，而不是检查三元模式来渲染或不渲染组件，答案是肯定的，你可以！
我的意思是在你的组件的渲染部分中，而不是你的 jsx 中的这种垃圾三元条件：
// some component body
return(
<section>
{/* some ui */}
{ someCondition && <MyComponent /> }
or
{ someCondition ? <MyComponent /> : null }
{/* more ui */}
</section>
)
您可以检查组件内部的条件，例如：
const MyComponent:React.FC = () => {
// get someCondition from context at here before any thing
if(someCondition) return null; // i mean this part , checking inside component!
return (
<section>
// some ui...
</section>
)
}
请考虑一下，在我的情况下，我从上层组件的上下文中提供了 someCondition 变量（例如，请在您的脑海中考虑），并且我不需要在 MyComponent 内部钻取 someCondition .
看看你的代码在这之后得到了多么清晰的视图，我的意思是你不需要在你的 JSX 中使用三元运算符，你的父组件如下所示：
// some component body
return(
<section>
{/* some ui */}
<MyComponent />
{/* more ui */}
</section>
)
MyComponent 会为您处理剩下的事情！
【讨论】：
我们可以这样返回，
return <React.Fragment />;
【讨论】：
null好还是坏？
在 render() 函数中返回虚假值将不会渲染任何内容。所以你可以这样做
render() {
let finalClasses = "" + (this.state.classes || "");
return !isTimeout && <div>{this.props.children}</div>;
}
【讨论】：