在三元语句中使用 Javascript 和 HTML 会在 React 中出错

Question

由于反应的性质，我必须使用三元运算符来输出一些代码。我收到解析错误，因为我在输出中有 JS 代码和 html。如何在此三元语句中同时插入 JS 和 html？

JS

<div>
{
props.starring? "..some code"
: 
    (
    const starrarr = JSON.parse("["+props.starring+"]") //this line is giving me an error
    <div className="altactorimg">
       <h6><img src="#" alt="pictures"/>{starrarr[0]}</h6>
       <h6><img src="#" alt="pictures"/>{starrarr[1]}</h6>
       <h6><img src="#" alt="pictures"/>{starrarr[2]}</h6>
    </div>
    )
}
</div>

我尝试了很多方法，比如将它们包裹在方括号中，并在每个元素中直接添加 JSON.parse，但仍然出现错误。

注：以上代码为react jsx

Answer 1

三元组的每个分支都必须是单个表达式。因此，您需要在三元表达式之外定义变量，如下所示，或者重构表达式（例如，将行为封装在函数或组件中）。

const SomeComponent = (props) => {
  const starrarr = props.starring && JSON.parse(`[${props.starring}]`)

  return (
    <div>
      {props.starring
        ? "..some code"
        : (
          <div className="altactorimg">
            <h6><img src="#" alt="pictures"/>{starrarr[0]}</h6>
            <h6><img src="#" alt="pictures"/>{starrarr[1]}</h6>
            <h6><img src="#" alt="pictures"/>{starrarr[2]}</h6>
          </div>
        )
      }
    </div>
  )
}

Answer 2

经过一番研究，我明白了。显然使用 JSON.parse 将字符串转换为数组会导致反应跨源错误。为了解决这个问题，我使用了 JS split 方法从字符串中创建了一个数组，并且一切正常，没有交叉来源错误。

感谢您的评论

在三元语句中使用 Javascript 和 HTML 会在 React 中出错

Using Javascript and HTML inside a ternary statement gives error in React

javascript

conditional-operator

reactjs