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

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

...
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>
    );
}

。。。
render（）{
返回(
！！可选！！
{this.props.optionalPropObj.label}
{this.props.optionalPropObj.value}
！！可选！！
标签一
{this.props.foo.one}
标签二
{this.props.foo.two}
标签三
{this.props.foo.Three}
...
);
}

有几种方法可以做到这一点，但我想尽量减少这种行为的逻辑占用。主要问题是React需要一个包装元素，而

和

是子元素

我可以分为两种回报，效率非常低：

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

。。。
if（本道具可选道具）{
返回(
//包括可选的道具列表元素
);
}否则{
返回(
//排除可选的道具列表元素
);
}

我可以用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>
);

返回(
{this.props.optionalPropObj&&this.props.optionalPropObj.label}
{this.props.optionalPropObj&&this.props.optionalPropObj.value}
);

如果我可以将元素封装在一个div中，那么这种情况就很简单了

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

返回(
...
{includeOptional&&}
或
{includeOptional？：null}
...
);

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

您可以试试这个

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>
    );
}

render（）{
返回(
{ 
这个。道具。可选的&&
{this.props.optionalPropObj.label}
{this.props.optionalPropObj.value}
}
标签一
{this.props.foo.one}
标签二
{this.props.foo.two}
标签三
{this.props.foo.Three}
...
);
}

您可以试试这个

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>
    );
}

render（）{
返回(
{ 
这个。道具。可选的&&
{this.props.optionalPropObj.label}
{this.props.optionalPropObj.value}
}
标签一
{this.props.foo.one}
标签二
{this.props.foo.two}
标签三
{this.props.foo.Three}
...
);
}

我找到了一种使用有效Html输出的方法。您可以有条件地包含一个元素数组。由于

标记的唯一有效子元素是

和

，因此我需要一种不使用包装器添加片段的方法

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>
    );
}

render（）{
返回(
{ 
这个。道具。可选的&&
[
{this.props.optionalPropObj.label}，
{this.props.optionalPropObj.value}
]
}
标签一
{this.props.foo.one}
标签二
{this.props.foo.two}
标签三
{this.props.foo.Three}
...
);
}

---

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

我找到了一种使用有效Html输出的方法。您可以有条件地包含一个元素数组。由于

标记的唯一有效子元素是

和

，因此我需要一种不使用包装器添加片段的方法

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>
    );
}

render（）{
返回(
{ 
这个。道具。可选的&&
[
{this.props.optionalPropObj.label}，
{this.props.optionalPropObj.value}
]
}
标签一
{this.props.foo.one}
标签二
{this.props.foo.two}
标签三
{this.props.foo.Three}
...
);
}

---

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

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