javascript - 基于整数道具值的条件渲染

Question

我正在尝试根据道具的整数值有条件地渲染 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;

标签： javascriptreactjs

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;