附加到现有的 JSX 而不是使用 if-else 条件逻辑

Question

在我的 React 类中，我经常发现自己不得不使用条件逻辑来决定要渲染的内容。这种方法的问题在于它会导致大量冗余标记。下面是一个例子：

if(this.props.quotes) {
    return (
        <div className="card">
            <div className="item-1">{this.props.header}</div>
            <div className="item-2">Add content...</div>
            <i className="fa fa-quote-left"></i>
            <i className="fa fa-quote-right"></i>
        </div>
    );
}
else {
    return (
        <div className="card">
            <div className="item-1">{this.props.header}</div>
            <div className="item-2">Add content...</div>
        </div>
    );
}

两个 HTML 组件之间的唯一区别是，一个组件有两个额外的字体很棒的元素。理想情况下，您希望使用一些基本标记，并根据条件的结果向其附加内容。

我尝试了以下方法，将 HTML 内容放入数组中，并在满足条件的情况下推送额外的 HTML 元素this.props.quotes：

var cardContent = [
    <div className="item-1">{this.props.header}</div>, 
    <div className="item-2">Add content...</div>
];

if(this.props.quotes) {
    cardContent.push(<i className="fa fa-quote-left"></i>);
    cardContent.push(<i className="fa fa-quote-right"></i>);
}

return (
    <div className="card">
        {cardContent}
    </div>
);

这引入了一个新问题，主要是 React 抱怨数组中缺少 key props：

Warning: Each child in an array or iterator should have a unique "key" prop.

在这种情况下，给元素键没有意义，因为 3/4 的内容是静态的（唯一的非静态元素是{this.props.header}）。

---

有没有比我上面概述的方法更好的附加到现有 JSX 的方法？我不想抑制所有唯一的键道具警告，因为它在映射的情况下仍然有效。接受冗余的 HTML 方法会更好吗？

Answer 1

当你渲染一个 JSX 元素数组时，每个元素都必须有一个key属性。在构建数组时，您可以执行以下操作

cardContent.push(<div className="item-1" key="item-1">..</div>)
cardContent.push(<div className="item-2" key="item-2">..</div>)

我还想提到您描述的示例，您的元素足够简单，具有内联条件而不是有条件返回的两个块

return (
  <div className="card">
    <div className="item-1">{this.props.header}</div>
    <div className="item-2">Add content...</div>
    {this.props.quotes && <i className="fa fa-quote-left"></i>}
    {this.props.quotes && <i className="fa fa-quote-right"></i>}
  </div>
)