如何在颤振中动态寻址小部件？

Question

我目前正在处理一个动态构建布局的项目。布局在 JSON 文件中定义。我现在已经设法动态构建布局。

但现在我面临着如何动态处理这些小部件的问题。关联的数据在第二个 JSON 文件中发送。

布局的 JSON 如下所示：

const Help = () => {
  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [status, setStatus] = useState(false)
  const [signedIn, setSignedIn] = useState(false)

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
    if (!user) {
      setDisplayName('')
      setEmail('')
      setSignedIn(false)
    } else {
      setDisplayName(user.displayName)
      setEmail(user.email)
      setSignedIn(true)
        }
      })
    })

    const onSubmit = (e) => {
      e.preventDefault();

      axios.post("/api/submit/submitContact", {
        displayName: displayName,
        email: email,
        message: message
      })

      setStatus(true)
    }

    const renderForm = () => {
      return (
      <section className="help-section">
        <div className="help-container">

          { signedIn === true ?
            <DashboardReturn /> :
              <div className="dashboard-return-container">
                <div className="dashboard-return">
                  <a href="/">
                    <div className="dashboard-arrow">
                      <span className="arrow-span-1"></span>
                      <span className="arrow-span-2"></span>
                    </div>
                    <p>Return to homepage</p>
                </a>
              </div>
            </div>
          }
          <form className="help-form" onSubmit={onSubmit}>
            <p className="help-form-heading">Get in touch</p>
            <label className="help-label">Name</label>
            <input className="help-input" type="text" name="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
            <label className="help-label">Email</label>
            <input className="help-input" type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            <label className="help-label">How can we help?</label>
            <textarea className="help-textarea" type="text" name="message" value={message} onChange={(e) => setMessage(e.target.value)} />
            <button className="help-button" type="submit">Submit</button>
          </form>
        </div>
      </section>
      )
    }

    const submitForm = () => {
      <section className="help-section">
        <div className="help-container">
          <a href="/">
            <h2 className="primary-logo">Lemio</h2>
          </a>
          <div className="help-success">
            <span className="help-success-span">
            <i className="fas fa-check-circle fa-3x"></i>
            <p>Thanks for getting in touch. We will get back to you as soon as possible. Return to your <a className="help-success-link" href="/dashboard">dashboard.</a></p>
            </span>
          </div>
        </div>
      </section>
    }

    return (
      <>
        {status === true ? renderForm() : submitForm() }
      </>
    )

  }

每个元素都有一个名称和一个小部件属性。

名称应用于解决小部件的问题，以便稍后可以插入数据。

第二步发送的数据如下所示：

"page": {
      "pagename": "maingetdatapage",
      "actionputbarcode": "OrderId=233:StaffId=32",
      "row": [
        {
          "name": "line1",
          "edgefloat": "top",
          "column": [
            {
              "name": "maintopleft",
              "widget": "orderinfo",
              "edgefloat": "all",
            },
            {
              "name": "maintopright",
              "widget": "staffwithPicture",
              "edgefloat": "right"
            }
          ]
        },
        {
          "name": "line2",
          "edgefloat": "all",
          "column": [
            {
              "name": "mainleft",
              "widget": "orderhistory",
              "edgefloat": "left",
            },
            {
              "name": "maindata",
              "widget": "MainDataList",
              "edgefloat": "all",
            },
            {
              "name": "mainright",
              "widget": "MainOccupation",
              "edgefloat": "right"
            }
          ]
        },
        {
          "name": "line3",
          "edgefloat": "botton",
          "column": [
            {"name": "bottominfo", "widget": "BottomInfo", "edgefloat": "all"}
          ]
        }
      ]
    }

有没有人知道如何动态寻址小部件，以便您可以在第二步中插入小部件的数据？

感谢您的帮助。