如何有条件地在 React 组件中包含列表元素答案

【问题标题】：How to conditionally include list elements in React Component如何有条件地在 React 组件中包含列表元素
【发布时间】：2017-02-20 07:30:11
【问题描述】：

我正在使用一个呈现字典列表的组件。我想有选择地传入一个可以插入额外列表元素的道具。

...
render() {
    return (
        <dl>
          !! Optional !!
          <dt>{this.props.optionalPropObj.label}</dt>
          <dd>{this.props.optionalPropObj.value}</dd>
          !! Optional !!

          <dt>Label One</dt>
          <dd>{this.props.foo.one}</dd>

          <dt>Label Two</dt>
          <dd>{this.props.foo.two}</dd>

          <dt>Label Three</dt>
          <dd>{this.props.foo.Three}</dd>

          ...

        </dl>
    );
}

有几种方法可以做到这一点，但我想尽量减少这种行为的逻辑足迹。主要问题是因为 React 需要一个包装元素，而 <dt> 和 <dd> 是子元素。

我可以分成两个回报，这是非常低效的：

...
if (this.props.optionalPropObj) {
    return (
        <dl>
          // Include optional prop list element
        </dl>
    );
} else {
    return (
        <dl>
          // Exclude optional prop list element
        </dl>
    );
}

我可以用一个 css 类隐藏它们，但是我有 4 个条件：

return (
    <dl>
      <dt className={this.props.optionalPropObj ? '' : 'hidden'}>
        {this.props.optionalPropObj && this.props.optionalPropObj.label}
      </dt>
      <dd className={this.props.optionalPropObj ? '' : 'hidden'}>
        {this.props.optionalPropObj && this.props.optionalPropObj.value}
      </dd>
    </dl>
);

如果我可以将元素包装在一个 div 中，这种情况将是微不足道的。

return (
    ...
    {includeOptional && <OptionalThing />}
    or
    {includeOptional ? <OptionalThing /> : null}
    ...
);

理想情况下，我想要一种方法来检查可选道具一次并包含额外的元素而无需任何代码重复。

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

你可以试试这个

render() {
    return (
        <dl>
          { 
           this.props.optionalPropObj &&
            <span>
              <dt>{this.props.optionalPropObj.label}</dt>
              <dd>{this.props.optionalPropObj.value}</dd>
            </span>
          }

          <dt>Label One</dt>
          <dd>{this.props.foo.one}</dd>

          <dt>Label Two</dt>
          <dd>{this.props.foo.two}</dd>

          <dt>Label Three</dt>
          <dd>{this.props.foo.Three}</dd>

          ...

        </dl>
    );
}

【讨论】：

是的。这与我的上一个示例相同。我想在 jsx 中创建类似文档片段的东西，所以我只检查一次条件。
我不确定用 span 包装是否是有效的 html，但如果我的编译器/linter 没有抱怨并且没有其他本机选项，我可能会解决这个问题。不过，如果有原生片段支持，那就太好了。
@Jecoms span 是一个有效的 HTML 包装。不用担心！

【解决方案2】：

我想出了一种使用有效 Html 输出的方法。您有条件地包含一个元素数组。由于<dl> 标记的唯一有效子元素是<dt> 和<dd>，因此我需要一种无需包装器即可添加片段的方法。

render() {
    return (
       <dl>
         { 
            this.props.optionalPropObj &&
            [
               <dt key="optionalPropLabel">{this.props.optionalPropObj.label}</dt>,
               <dd key="optionalPropValue">{this.props.optionalPropObj.value}</dd>
            ]
         }

         <dt>Label One</dt>
         <dd>{this.props.foo.one}</dd>

         <dt>Label Two</dt>
         <dd>{this.props.foo.two}</dd>

         <dt>Label Three</dt>
         <dd>{this.props.foo.Three}</dd>

         ...

       </dl>
    );
}

编辑：由于我正在渲染一个数组，React 需要每个元素的键，所以我添加了一些虚拟键。我一次只在一个页面上显示其中一个，所以我的要求允许它们是静态的。

【讨论】：