Question

我有一个通知组件，我有一个超时设置。超时后我拨打this.setState({isTimeout:true})。

我想要做的就是如果已经超时，我只想渲染一下：

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

问题是： return（）; //这里有一些语法错误

Answer 1

是的，你可以，但如果你不想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' />

Answer 2

某些答案略有错误，并指向文档的错误部分：

如果您希望组件不渲染任何内容，只需按照doc返回Organization：

在极少数情况下，您可能希望组件隐藏自身，即使它隐藏了由另一个组件渲染。为此，请返回null而不是其渲染输出。

例如，如果尝试返回<ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" />，则会出现以下错误：

渲染未返回任何内容。这通常意味着退货声明丢失。或者，要不显示任何内容，请返回null。

其他答案指出，null，undefined，null和true是有效的子代，对于在内部进行渲染很有用您的jsx，但是您想让您的组件隐藏/不显示任何内容，只需返回false。

Answer 3

是的，你可以从React渲染方法中返回一个空值。

您可以返回以下任何内容：false, null, undefined, or true

根据docs：

false，null，undefined和true是有效的孩子。他们根本就是不渲染。

你可以写

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

但是return null是最优选的，因为它表示没有返回任何内容

Answer 4

有点偏离主题，但是如果您需要一个永远不会呈现任何内容的基于类的组件，并且很乐意使用一些尚待标准化的ES语法，那么您可能要这样做：

#root .htaccess
RewriteEngine on
RewriteRule ^$ public/ [L]
RewriteRule (.*) public/$1 [L]

#/public .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

这基本上是一个箭头方法，当前需要使用transform-class-properties Babel插件。 React不会让您定义没有render = () => null函数的组件，这是满足我所想到的这一要求的最简洁的形式。

我目前在render文档中借用的ScrollToTop的变体中使用此技巧。以我为例，该组件只有一个实例，并且不呈现任何内容，因此，简短形式的“ render null”非常适合。

Answer 5

对于那些遇到有关检查他们可以从组件返回 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 变量（例如，只考虑您的想法）并且我不需要支撑钻取 someCondition MyComponent 内。

看看你的代码在这之后有多干净，我的意思是你不需要在你的 JSX 中使用三元运算符，你的父组件会像下面这样：

// some component body
return(
  <section>
   {/* some ui */}
   
   <MyComponent />

   {/* more ui */}
  </section>
)

而 MyComponent 会为您处理剩下的事情！

Answer 6

我们可以这样回来

return <React.Fragment />;

Answer 7

在render（）函数中返回假值将不呈现任何内容。所以你可以做

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }

Answer 8

如果您使用的是 Typescript 并且您的组件/函数具有返回类型 React.Element，您将收到以下错误。

<块引用>

类型 'null' 不能分配给类型 'ReactElement'.

解决方案是React.Fragment。

return <React.Fragment />

或

return <></>

是否可以在反应渲染功能中返回空？

8 个答案: