反应和条件渲染答案

【问题标题】：react and conditional rendering反应和条件渲染
【发布时间】：2017-06-02 23:23:11
【问题描述】：

目前我正在使用以下代码根据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)
  }
}

【问题讨论】：

在一个函数中有多个返回并不是一个坏习惯。
我同意@IvankaTodorova。即使您的逻辑以某种方式中断或有缺陷，也只有一个 return 可以实际执行。

标签： javascript reactjs

【解决方案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>
    );

【讨论】：

但在这种情况下，react 将始终呈现
@Radex 您可以将条件移动到 ul，并将其更改为 || null，或在使用“Finder”常量之前使用条件渲染来避免这种情况。至于是否有多个返回语句是不好的做法，我会说不。我的组件通常依赖它。
能否请您在回答中提供一个简单的示例，以便我可以比较两种解决方案，谢谢！
facebook.github.io/react/docs/conditional-rendering.html 你在这里拥有一切，你可以使用内联 IF，但在这里它会有点矫枉过正。正如@ivanka 所说，在同一个渲染器中有两个返回是没有问题的。我什至发现在这种情况下更容易理解。

【解决方案2】：

在函数中使用多个返回并没有错，但是当你这样做时，最好将“默认”返回作为函数中的最后一个语句，以使函数总是返回一些东西更明显。
在您的情况下，这意味着您可以将 return (null)（无需将 null 括在括号中，顺便说一句）语句移出 else 子句，并将其作为函数的最后一个语句。

也可以在return 中使用带有三元的单个 return 语句，如下所示：

return locations.length > 0 ? (
  <ul>
    {locations.map((location, index) =>
      <Location
        key={index}
        {...locations[index]}
        onLocationClick={() => onLocationClick(location)}
      />
    )}
  </ul>
) : null

【讨论】：