reactjs - 附加到现有 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 组件之间的唯一区别是其中一个组件有两个额外的 font-awesome 元素。理想情况下，您需要使用一些基本标记，并根据条件的结果向其附加内容。

我尝试了以下方法，将 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 提示数组中缺少关键 props:

警告:数组或迭代器中的每个子项都应该有一个唯一的“key”属性。

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

<小时/>

是否有比我上面概述的方法更好的附加到现有 JSX 的方法？我不想抑制所有唯一的关键 Prop 警告，因为它在映射的情况下仍然有效。直接接受多余的 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>)

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

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