在三元语句中使用Javascript和HTML会导致React错误

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

JS

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

---

注意：上面的代码是react jsx

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

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

---

经过一些研究，我发现了。显然，使用JSON.parse将字符串转换为数组会导致react跨源错误。为了解决这个问题，我使用JS split方法从字符串中创建了一个数组，并且一切工作都很完美，没有交叉源错误

---

感谢您的评论

您有两个选择，在所有三个h6中进行解析，或者将常量放在前面{还有三元。我知道我试过在所有三个h6中解析，但我会回答一个交叉源错误我会尝试第二个选项我不相信你可以在那个地方/方式声明一个常量-我认为这是错误的来源，而不是三元。三元似乎是一个不好的选择，为什么不将其作为一个方法并返回markup？很有用，但react返回一个跨源错误。它与JSON.parse有关。你知道为什么吗？@Uriel props.starring的值是。在react Devtools或console中检查该值。记录并查看。我知道。这是一个数组。但我刚刚发现，如果你希望props.starring是一个类似于1、2、3的字符串，那么你就可以使用props.starring.split创建你的阵列会更好。这比你展示的更安全、更高效。这正是我几分钟前发现的。无论如何，谢谢

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