如何将 map 数组 arrays 转换为反应组件中的 JSX 元素，每个内部数组都有自己的 clipPath

Question

array_groups is an array of arrays. The objects in the inner arrays are coordinates of regular circles, which are all proximal and the idea is that these inner arrays of circles should all be clipPath-ed together. The idea is that when I move my mouse over each area of proximal circles, the rect only shows in that area.

function Hoverpicture() {
 const [image, setimage] = useState("");
 const [mousepos, setmousepos] = useState({ x: 0, y: 0 });
 const [radius, setradius] = useState(20)
 const [label, setlabel] = useState("");
 const [region, setregion] = useState([]); 
 const [input, setinput] = useState("");
 const [mode, setmode] = useState(1);
 const [mousemove, setmousemove] = useState(()=>onmousemove);
 
  function onlabelclick(e) {
    setlabel("clicked label")
  }

  function onmouseclick(e) {
    let newregion = region.concat({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY, r: radius, label: input});
    setregion(newregion);
  }

  function checkregion(pos) {
    for (let reg of region) {
      let xs = pos.x - reg.x;
      let ys = pos.y - reg.y;
      xs*=xs;
      ys*=ys;
      console.log(reg);
      if (reg.r-Math.sqrt( xs + ys ) > 0) {
        return reg.label;
      } 
    }
    return false;
  }
  
  function onmousemove(e) {
    setmousepos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
    let displaylabel = checkregion({x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY});
    if (displaylabel) {
      setlabel(displaylabel);
    } else {
      setlabel("");
    }
  }
  function handleinput(e) {
    setinput(e.target.value);
  }
  function myreducer(accum,next) {
              accum[next.label] = accum[next.label] || [];
              accum[next.label].push(next);
              return accum;
            }
  
  var grouped_region = region.reduce(function (accum,next) {
              accum[next.label] = accum[next.label] || [];
              accum[next.label].push(next);
              return accum;
            },{});

  
  var array_groups = [];
  for (let area in grouped_region) {
    array_groups.push(grouped_region[area]);
  }


  if (mode===1)
  {
    return (
    <div>
      <div className="img-overlay-wrap">
        <img src={image} alt="table with coffee"/>
        <svg onMouseMove={onmousemove} viewBox="0 0 auto auto">
          <circle cx={mousepos.x} cy={mousepos.y} r={radius} fill-opacity="0"/>
       
          {array_groups.map((ar,i) =>(
            <clipPath id="shape">
              {ar.map(reg =>(<circle onClick={onlabelclick} cx={reg.x} cy={reg.y} r={reg.r} fill="orange"/>))}
            </clipPath>
            <rect x={0} y={0} width="100%" height="100%" clipPath="url(#shape)" class="label"  fill-opacity="0"/>
            ))}
        </svg>
      </div>
      <div>
        <h1>{ label }</h1>
        <button onClick={()=>{setmode(1)}}>✏</button>
      </div>
    </div>
      
    )}

The CSS looks like this..

.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.label:hover {
  fill-opacity:.5;
  fill:red;
}

Answer 1

Oh, yeah, I have seen that one. You just need to enclose all those adjacent tags ( clipPath and rect ) in a single node for the mapping return. React Fragment comes in handy for this.

Fragment - keyed Fragments

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments

{array_groups.map((ar, i) => (
  <Fragment key={i}>
    <clipPath id="shape">
      {ar.map((reg) => (
        <circle
          onClick={onlabelclick}
          cx={reg.x}
          cy={reg.y}
          r={reg.r}
          fill="orange"
        />
      ))}
    </clipPath>
    <rect
      x={0}
      y={0}
      width="100%"
      height="100%"
      clipPath="url(#shape)"
      class="label"
      fill-opacity="0"
    />
  </Fragment>
))}

I can't save the edits I made to your codepen, but I can copy the contents of the component here.

function Hoverpicture() {
  const [image, setimage] = useState("");
  const [mousepos, setmousepos] = useState({ x: 0, y: 0 });
  const [radius, setradius] = useState(20);
  const [label, setlabel] = useState("");
  const [region, setregion] = useState([]);
  const [input, setinput] = useState("");
  const [mode, setmode] = useState(1);

  function getimage() {
    storage
      .child("peterRabbit.png")
      .getDownloadURL()
      .then((url) => {
        let image = url;
        setimage(image);
      })
      .catch((error) => {
        // Handle any errors
      });
  }

  function getlabels() {
    let doc = ref.doc("01xfB3duoKI2Uoq4gtYZ");
    doc.get().then((d) => {
      console.log(d.data());
    });
  }
  getlabels();
  getimage();
  function onlabelclick(e) {
    setlabel("clicked label");
  }
  function onmouseclick(e) {
    let newregion = region.concat({
      x: e.nativeEvent.offsetX,
      y: e.nativeEvent.offsetY,
      r: radius,
      label: input
    });
    setregion(newregion);
  }
  function getcoords() {}
  function checkregion(pos) {
    for (let reg of region) {
      let xs = pos.x - reg.x;
      let ys = pos.y - reg.y;
      xs *= xs;
      ys *= ys;
      console.log(reg);
      if (reg.r - Math.sqrt(xs + ys) > 0) {
        return reg.label;
      }
    }
    return false;
  }

  function onmousemove(e) {
    setmousepos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
    let displaylabel = checkregion({
      x: e.nativeEvent.offsetX,
      y: e.nativeEvent.offsetY
    });
    if (displaylabel) {
      setlabel(displaylabel);
    } else {
      setlabel("");
    }
  }
  function handleinput(e) {
    setinput(e.target.value);
  }
  function myreducer(accum, next) {
    accum[next.label] = accum[next.label] || [];
    accum[next.label].push(next);
    return accum;
  }
  const [mousemove, setmousemove] = useState(() => onmousemove);
  var grouped_region = region.reduce(function (accum, next) {
    accum[next.label] = accum[next.label] || [];
    accum[next.label].push(next);
    return accum;
  }, {});
  console.log(grouped_region);
  var array_groups = [];
  for (let area in grouped_region) {
    array_groups.push(grouped_region[area]);
  }
  
  if (mode === 0) {
    return (
      <div>
        <div className="img-overlay-wrap">
          <img src={image} alt="table with coffee" />
          <svg onMouseMove={onmousemove} viewBox="0 0 auto auto">
            <circle
              cx={mousepos.x}
              cy={mousepos.y}
              r={radius}
              fill-opacity="0"
            />

            {array_groups.map((ar, i) => (
              <>
                <clipPath id="shape">
                  {ar.map((reg) => (
                    <circle
                      onClick={onlabelclick}
                      cx={reg.x}
                      cy={reg.y}
                      r={reg.r}
                      fill="orange"
                    />
                  ))}
                </clipPath>
                <rect
                  x={0}
                  y={0}
                  width="100%"
                  height="100%"
                  clipPath="url(#shape)"
                  class="label"
                  fill-opacity="0"
                />
              </>
            ))}
          </svg>
        </div>
        <div>
          <h1>{label}</h1>
          <button
            onClick={() => {
              setmode(1);
            }}
          >
            ✏
          </button>
        </div>
      </div>
    );
  } else if (mode === 1) {
    return (
      <div>
        <div className="img-overlay-wrap">
          <img src={image} alt="table with coffee" />
          <svg
            onMouseMove={onmousemove}
            onClick={onmouseclick}
            viewBox="0 0 auto auto"
          >
            <circle
              cx={mousepos.x}
              cy={mousepos.y}
              r={radius}
              fill="rebeccapurple"
            />
            {region.map((reg) => (
              <circle
                onClick={onlabelclick}
                class="label"
                cx={reg.x}
                cy={reg.y}
                r={reg.r}
                fill="orange"
              />
            ))}
          </svg>
        </div>
        <div>
          <h1>
            {mousepos.x} {mousepos.y}
          </h1>
          <h1>{label}</h1>
          <input
            placeholder="label"
            value={input}
            onChange={handleinput}
          ></input>
          <button
            onClick={() => {
              setmode(0);
            }}
          >
            ✅
          </button>
        </div>
      </div>
    );
  }
}