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

【问题标题】：Using Javascript and HTML inside a ternary statement gives error in React在三元语句中使用 Javascript 和 HTML 会导致 React 出错
【发布时间】：2020-09-02 19:40:27
【问题描述】：

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

<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

【问题讨论】：

您有 2 个选项，在所有三个 h6 中进行解析，或者将该 const 放在 { 之前并在那里制作三元。
我知道我尝试在所有三个 h6 中进行解析，但对我的游戏反应是交叉起源错误
我会尝试第二个选项
我不相信你可以在那个地方/方式声明一个 const - 我认为这是错误的根源，而不是三元。
三元似乎是一个糟糕的选择，为什么不让它成为一个方法和方法返回标记？

标签： javascript reactjs conditional-operator

【解决方案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>
  )
}

【讨论】：

有帮助，但 react 返回跨源错误。它与 JSON.parse 有关。你知道为什么吗？
@Uriel props.starring 的值为probably not what you're expecting。检查 React Devtools 或 console.log 中的值并查看。
我愿意。它是一个数组。但我只是想通了谢谢
请注意，如果您希望props.starring 是一个类似one,two,three 的字符串，则最好使用props.starring.split(",") 创建您的数组。这比您展示的更安全、更高效。
这正是我几分钟前发现的。还是谢谢

【解决方案2】：

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

感谢您的cmets

【讨论】：