在ReactJS中使UI组件可选

Question

假设我在React中有一些UI组件，它们在屏幕上呈现一些HTML，如下所示：

<div class="content-block margin-10">
  <h1 class="block-head">Heading Text</h1>
  <div class="section-text bg-gray text-md">Section Text</div>
</div>

在屏幕上，这将显示为适当的HTML。我想要的是用户能够选择(通过单击)这个块，它应该显示元素树以及应用到页面一侧每个元素的类。然后，我的目标是允许用户更改应用的类，以查看UI随类的变化而发生的变化。

我希望能够在不使用任何库(如grapesjs )的情况下完成react/javascript。

你能告诉我如何才能做到这一点吗？

更新:我做的一件事是向块div添加了一个函数onClick={(e) => handleClick(e)}。

现在，在handleClick中，我可以对元素进行分类：

const handleClick = (e) => {
    console.log('E', e.target.classList);
    e.target.classList.add(styles.borderline);
}

现在的问题是，如果页面上有多个块，我如何知道选择了哪个块？最后，我希望保存/替换与数据库中的块相关的数据。因此，我需要能够知道哪个块被更新，并保存它的数据。

Answer 1

该解决方案分为三部分：

values

• Displaying树

• 将有状态类值绑定到输入

(1)使用带有React钩子的函数组件，可以使用useState钩子初始化每个默认类名的变量，如下所示：

const [containerClass, setContainerClass] = useState("content-block margin-10");
const [headingClass, setHeadingClass] = useState("block-head");
const [sectionClass, setSectionClass] = useState("section-text bg-gray text-md");

这将它们的默认值设置为问题描述中的值，并确保在更新这些值时，任何依赖于这些值的HTML都会重新呈现。因此，为了将这些元素绑定到相关元素，我们可以使用以下className，而不是它们的硬编码对应程序：

<div className={containerClass}>
  <h1 className={headingClass}>Heading Text</h1>
  <div className={sectionClass}>Section Text</div>
</div>

(2)显示树需要我们做三件事:指示是否显示树的布尔变量、切换此变量的单击事件(如问题中所述)，以及当变量为真时呈现的节。

变量本身可以是一个简单的useState声明，如下所示：

const [treeIsDisplayed, setTreeIsDisplayed] = useState(false);

可以使用以下函数作为容器div的onClick值进行切换：

const toggleTree = () => setTreeIsDisplayed((prev) => !prev);

我们可以有条件地将树渲染成这样：

{treeIsDisplayed && (
  <div>
    <p>
      {"<div class="}
      <input value={containerClass} />
      {"></div>"}
    </p>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;{"<h1 class="}
      <input value={headingClass} />
      {"></h1>"}
    </p>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;{"<div class="}
      <input value={sectionClass} />
      {"></div>"}
    </p>
    <p>{"</div>"}</p>
  </div>
)}

这将呈现如下内容：

​

​

注意:默认情况下，树将在HTML下显示，因此需要一些CSS来显示它。

(3)

现在我们可以创建函数，由上面的输入来动态地设置类名：

const changeContainerClass = (e) => setContainerClass(e.target.value);
const changeHeadingClass = (e) => setHeadingClass(e.target.value);
const changeSectionClass = (e) => setSectionClass(e.target.value);

并将每个输入的onChange值设置为相应的变更函数。

总之，这里构建的工作解决方案如下所示：

const App = () => {
  const [containerClass, setContainerClass] = useState("content-block margin-10");
  const [headingClass, setHeadingClass] = useState("block-head");
  const [sectionClass, setSectionClass] = useState("section-text bg-gray text-md");

  const [treeIsDisplayed, setTreeIsDisplayed] = useState(false);

  const toggleTree = () => setTreeIsDisplayed((prev) => !prev);

  const changeContainerClass = (e) => setContainerClass(e.target.value);
  const changeHeadingClass = (e) => setHeadingClass(e.target.value);
  const changeSectionClass = (e) => setSectionClass(e.target.value);

  return (
    <>
      <div className={containerClass} onClick={toggleTree}>
        <h1 className={headingClass}>Heading Text</h1>
        <div className={sectionClass}>Section Text</div>
      </div>
      {treeIsDisplayed && (
        <div>
          <p>
            {"<div class="}
            <input value={containerClass} onChange={changeContainerClass} />
            {"></div>"}
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;{"<h1 class="}
            <input value={headingClass} onChange={changeHeadingClass} />
            {"></h1>"}
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;{"<div class="}
            <input value={sectionClass} onChange={changeSectionClass} />
            {"></div>"}
          </p>
          <p>{"</div>"}</p>
        </div>
      )}
    </>
  )
}