附加到现有的 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 内容放入一个数组中，并在满足条件 this.props.quotes 的情况下将额外的 HTML 元素推入：

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 抱怨数组中缺少关键道具：

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

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

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

Append to existing JSX instead of using if-else conditional logic

reactjs

react-jsx