有没有办法在一个变量中添加多个 HTML 元素？答案

【问题标题】：Is there a way to add more than one HTML element in a variable?有没有办法在一个变量中添加多个 HTML 元素？
【发布时间】：2021-07-14 20:06:34
【问题描述】：

我正在尝试创建一个名为 Characters 的变量，以便在单击它时呈现三个不同的按钮，目前，我尝试将三个 HTML 元素放在同一个变量中，但它不起作用，因为我认为这不是正确的做法。

我试过了：

     if (!hidden) {
    Characters = <button>Star</button>
<button>Toad</button>
<button>x</button>
    }

但它不起作用。

import React, {useState} from 'react'
import mainImage from '../img/marioBrosMain.jpg'
import '../main.css'
import Box from '../pages/box.js'

function Main() {

  const [style, setStyle] = useState();
  const [hidden, setHidden] = useState(true)
  let Characters;

  const imageClick = (x, y) => {
    const newStyle = {
      position: "absolute",
    zIndex: 2,
    borderRadius: "2px solid red",
    border: "4px solid red",
    height: "50px",
    paddingLeft: "50px",
    left: `${x}px`,
         top: `${y}px`
          }
          setHidden(false)
    return newStyle
  }
  if (!hidden) {
Characters = <button>Star</button>
}
    return (
        <div id="frame">
          <div id="mainImage" style = {style}>
          {Characters}
          </div>
          <img src={mainImage} className="marioBros____image"  onClick={e => setStyle(imageClick(e.pageX, e.pageY))} />
        </div>
    )
}

export default Main

【问题讨论】：

定义不工作...
将它们包装在一个片段中。
这能回答你的问题吗？ Return multiple elements inside React.render()

标签： javascript reactjs

【解决方案1】：

是的，您可以将它们包装在 div 或片段中：

Characters = (
    <>
        <button>Star</button>
        <button>Toad</button>
        <button>x</button>
    </>
);

编辑：相关文档：https://reactjs.org/docs/fragments.html

【讨论】：

【解决方案2】：

您需要将它们包装在一个片段中：

if (!hidden) {
    Characters = (
      <>
        <button>Star</button>
        <button>Toad</button>
        <button>x</button>
      </>
    );
}

【讨论】：

【解决方案3】：

const Characters = ()=>{
return(
   <>
    <button>Star</button>
    <button>Toad</button>
    <button>x</button>
   </>
   );
 };

【讨论】：