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

我有几个项目，我想使用渲染来迭代它们并返回所需的元素。但是，在某些条件下将构建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>

{
this.props.obj.items.map（（项目，索引）=>{
返回(
（item.left圆括号？“+item.left圆括号+”：“”）
+“”+项。说明+“”
+（item.RightBranchs？“+item.RightBranchs+：”）
+（item.LogicOperator&&index

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

我尝试过的方法

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

我真的不想用

---

有什么解决方法吗？

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

可以使用仅在条件为真时才会渲染的组件

{this.props.obj.items.map（（项，索引）=>{
返回(
{item.left圆括号&&{item.left圆括号}
{item.Description}
{item.rightcardians&&{item.rightcardians}
{item.logicooperation&&index

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

可以使用仅在条件为真时才会渲染的组件

{this.props.obj.items.map（（项，索引）=>{
返回(
{item.left圆括号&&{item.left圆括号}
{item.Description}
{item.rightcardians&&{item.rightcardians}
{item.logicooperation&&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 &&
        <span>&nbsp;{item.LogicOperand}</span>           
    }
    &nbsp;          
  </span>
) 

返回(
{
item.left圆括号&&
{item.left圆括号}
}
{item.Description}
{
项右括号&&
{item.rightscreates}
}
{
item.logic操作数和索引

这将在HTML层次结构中添加更多的

span

s，以便React可以正确地呈现所有内容。这用于根据条件呈现元素

这不是解决方法，这是有条件地呈现元素的正确方法。

不要使用字符串：

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

返回(
{
item.left圆括号&&
{item.left圆括号}
}
{item.Description}
{
项右括号&&
{item.rightscreates}
}
{
item.logic操作数和索引

这将在HTML层次结构中添加更多的

span

s，以便React可以正确地呈现所有内容。这用于根据条件呈现元素

---

这不是一个解决方法，这是有条件地呈现元素的正确方法。

这仍然是无效语法。这仍然是无效语法。这就像一个符咒！由于span元素，我只需要安排一些CSS规则。谢谢您，先生！@ggderas没问题，很高兴提供帮助！这就像一个符咒！我只需要安排一些CSS规则因为span元素。谢谢你，先生！@ggderas没问题，很乐意帮忙！