我如何在 JSX 中声明一个变量？

Question

我有以下从 Apollo Server 后端获取数据的代码。数据采用以下格式：

{ name: 'geodude', url: 'https://pokeapi.co/api/v2/pokemon/74/' },
{ name: 'graveler', url: 'https://pokeapi.co/api/v2/pokemon/75/' },

为了显示图像，我拆分了这个 url 字符串并在最后得到 id，如 74 或 75。但是我如何在 JSX 中拆分它，因为它不允许我声明任何变量.

return (
    <div className="App">
      {data.pokemonList.map((data) => (
         let a = data.url.split(/) // this gets the id from my url
         const b = "https://raw/${a}.png";    //use it in the string like this

但显然我不能在 JSX 中这样做。此外，我不能在 return 之外执行此操作，因为我必须像这样拆分所有映射值。有更简单的方法吗？

Answer 1

当然你可以在 JSX 中做到这一点——你可以将它们全部放在一个表达式中，例如：

{data.pokemonList.map((data) =>
  <img src={
    `https://raw/${data.url.match(/\d+(?=\/$)/)[0]}.png`
  }>
)}

或者创建一个块，允许你声明变量，然后return JSX 在最后：

{data.pokemonList.map((data) => {
  const num = data.url.match(/\d+(?=\/$)/)[0];
  const url = `https://raw/${num}.png`
  return <img src={src}>;
})}

请注意，您需要反引号才能使用 ${}（不是 "）插入到字符串中，并且您当前的 a 会给您一个数组，而不是字符串，因此插入${a} 不行。你需要从 URL.

中提取你想要的字符串

我如何在 JSX 中声明一个变量？

How do I declare a variable in JSX?

url

jsx

reactjs