Question

我试图根据prop的整数值有条件地呈现jsx。在下面的示例中，道具depth的范围是0-4。以下代码返回错误Node(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. depth为0，所以为什么不呈现？预先感谢。

import React from 'react';

function Node({ type, name, depth }) {

  if (depth === 0) {
    return (
      <div>
        {type}
        {name}
        {depth}
      </div>
    );
  }
}

export default Node;

Answer 1

您始终需要从渲染返回：

import React from 'react';

function Node({ type, name, depth }) {

  if (depth === 0)
    return (
      <div>
        {type}
        {name}
        {depth}
      </div>
    );

    return null

}

export default Node;

Answer 2

您也可以在return内有一个条件：

import React from 'react';

function Node({ type, name, depth }) {
    return (
      {depth === 0?
        <div>
          {type}
          {name}
          {depth}
        </div>
      : null}    
    );  
}

export default Node;

Answer 3

您还需要返回else部分

function Node({ type, name, depth }) {
if (depth === 0) {
  return (
    <div>
      {type}
      {name}
      {depth}
    </div>
  );
}
else{
  return null;
}

}

基于整数prop值的条件渲染

3 个答案: