Question

我想使用df.apply渲染几个项目来迭代它们并返回所需的元素。但是，在某些情况下将构建HTML。

以下是代码：

<span className="items-overview">
    {
    this.props.obj.items.map((item, index) => {

        return (
            (item.LeftParenthesis ? "<b>" + item.LeftParenthesis + "</b>" : "")
            + "<i>" + item.Description + "</i>"
            + (item.RightParenthesis ? "<b>" + item.RightParenthesis + "</b>" : "")
            + (item.LogicOperand && index < this.props.obj.Conditions.length - 1 ? "&nbsp;<span>" + item.LogicOperand + "</span>" : "") + "&nbsp;"                                 
        )            
    })
    }
</span>

结果如下（假设只有一个项目）：

Array#map method

方法我尝试过

我知道我可以有多个IF语句或一个switch语句来确定返回什么，但这有点乱。我宁愿避免这个
我真的不想使用

对此有任何解决方法吗？

Answer 1

不要使用字符串：

return (
  <span>
    {
      item.LeftParenthesis &&
        <b>{item.LeftParenthesis}</b>
    }
    <i>{item.Description}</i>
    {
      item.RightParenthesis &&
        <b>{item.RightParenthesis}</b>
    }
    {
      item.LogicOperand && index < this.props.obj.Conditions.length - 1 &&
        <span>&nbsp;{item.LogicOperand}</span>           
    }
    &nbsp;          
  </span>
)

这将为您的HTML层次结构添加更多span，以便React可以正确呈现所有内容。这使用React's conditional rendering根据条件呈现元素。

这不是一种解决方法，这是有条件地渲染元素的正确方法。

Answer 2

为什么不使用实际的反应组件而不是字符串？

您可以使用仅在条件为真时才呈现的组件 https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator

<span className="items-overview">
    {this.props.obj.items.map((item, index) => {
        return (
            <span>
                {item.LeftParenthesis && <b>{item.LeftParenthesis}</b>}
                <i>{item.Description}</i>
                {item.RightParenthesis && <b>{item.RightParenthesis}</b>}
                {item.LogicOperand && index < this.props.obj.Conditions.length - 1 && (&nbsp;<span>{item.LogicOperand}</span>)}
                &nbsp;
            </span>                                       
        );
    )}
</span>

使用React基于多个条件呈现HTML代码

2 个答案: