在反应中的动态 html 标签中添加样式

Question

嗨，我想在动态生成的 html 标签中添加样式，例如h1、img等。我已经通过映射生成了 html 标签，但现在我想在其上添加一些样式，但我无法在已生成的标签上添加样式。

const [textFieldStyles, setTextFieldStyles] = useState({
  width: "5rem",
  height: "2rem",
  color: "blue",
  fontSize: "20px",
});
const handleTextField = (e) => {
  setTextFieldStyles({ ...textFieldStyles, [e.target.name]: e.target.value });
};
function handleAdd() {
  const values = [...fields];
  values.push({
    top: 20,
    left: 80,
    tag: (
      <h6
        className="inputField"
        style={{
          width: textFieldStyles.width,
          height: textFieldStyles.height,
          color: textFieldStyles.color,
          fontSize: textFieldStyles.fontSize,
        }}
        contentEditable="true"
      >
        hello
      </h6>
    ),
  });
  setFields(values);
}

return (
<div>
fields.map((key, index)=>{
return {key.tag}
}
<label>width</label>
    <input name="width" onChange={handleTextField} type="text" /><label>height</label>
    <input name="height" onChange={handleTextField} type="text" /><label>color</label>
    <input name="color" onChange={handleTextField} type="text" /><label>font Size</label>
    <input name="fontSize" onChange={handleTextField} type="text" />
</div>
)```

Answer 1

检查这个：

（已编辑）

import React, { useState, useEffect } from "react";

export default function App() {
  const [fields, setFields] = useState([]);
  const [textFieldStyles, setTextFieldStyles] = useState({
    width: "5rem",
    height: "2rem",
    color: "blue",
    fontSize: "20px"
  });

  let values = [...fields];

  const handleTextField = e => {
    setTextFieldStyles({ ...textFieldStyles, [e.target.name]: e.target.value });
  };

  const handleAdd = () => {
    values.push({
      top: 20,
      left: 80,
      tag: (
        <h6 className="inputField" style={textFieldStyles}>
          hello
        </h6>
      )
    });
    setFields(values);
  };

  const submitForm = e => {
    e.preventDefault();
    handleAdd();
    document.getElementById("form").reset();
  };

  useEffect(() => {
    handleAdd();
  }, []);

  return (
    <div>
      {fields.map((key, index) => key.tag)}
      <form id="form" onSubmit={submitForm}>
        <label>width</label>
        <input name="width" onChange={handleTextField} type="text" />
        <label>height</label>
        <input name="height" onChange={handleTextField} type="text" />
        <label>color</label>
        <input name="color" onChange={handleTextField} type="text" />
        <label>font Size</label>
        <input name="fontSize" onChange={handleTextField} type="text" />
        <button type="submit">Click</button>
      </form>
    </div>
  );
}

演示： stackblitz