Question

目前，我正在使用以下代码根据hasLocations变量有条件地呈现一些HTML。

代码有效，但我想知道是否有更好的方法来实现相同的结果，例如，我不确定有两个return是一个好习惯。

const Finder = ({ locations, onLocationClick }) => {
  let hasLocations = locations.length > 0
  if (hasLocations) {
    return (
      <ul>
        {locations.map((location, index) =>
          <Location
            key={index}
            {...locations[index]}
            onLocationClick={() => onLocationClick(location)}
      />
    )}
      </ul>
    )
  } else {
    return (null)
  }
}

Answer 1

或者你可以使用conditional rendering。对于您的示例，这将是这样的。

const Finder = ({ locations, onLocationClick }) => {
    return (
        <ul>
            {locations.length > 0 &&
            locations.map((location, index) =>
                <Location
                    key={index}
                    {...locations[index]}
                    onLocationClick={() => onLocationClick(location)}
                />
            )}
        </ul>
    );
}

编辑：我的解决方案如下。我会避免在其中添加任何逻辑（AKA表示组件）。所以它会成为

    const Finder = ({ locations, onLocationClick }) => {
        return (
            <ul>
                locations.map((location, index) =>
                <Location
                    key={index}
                    {...locations[index]}
                    onLocationClick={() => onLocationClick(location)}
                />
                )
            </ul>
        );
    }

当你需要使用它时，你可以这样做：

    return (
        <div>
            {locations.length > 0 && Finder}
        </div>
    );

Answer 2

在函数中使用多个返回没有任何问题，但是当你这样做时，最好将“默认”返回作为函数中的最后一个语句，以使函数更加明显地返回一些东西。
在你的情况下，这意味着你可以移动return (null)（不需要在null子句中括起else括号中的return语句，并将其作为函数的最后一个语句

也可以在return locations.length > 0 ? ( <ul> {locations.map((location, index) => <Location key={index} {...locations[index]} onLocationClick={() => onLocationClick(location)} /> )} </ul> ) : null中使用带有三元的单一return语句，如下所示：

{{1}}

反应和条件渲染

2 个答案: