如何允许用户在 React 中编辑网站的一部分？

Question

我是 Web 开发的新手，我似乎找不到太多关于这方面的信息。

所以我和我的项目组正在使用 React 构建一个电子商务网站。到目前为止，有“客户用户”和一些“管理员用户”。该网站是一个单一的应用程序，不同的用户类型（客户和管理员）将由私有路由分隔，因此它们每个都有只有该用户类型可以访问的页面。

我将有一个名为“条款和条件”的页面，其中将包含一大段包含公司条款和条件的文本。我希望管理员用户能够从另一个页面（组件）编辑该页面（组件）中的文本。

为此，我需要将该可编辑文本作为字符串存储在数据库中并在那里进行编辑，还是有办法将其存储在应用程序中？将其存储在应用程序中是首选。

长话短说，我希望管理员用户能够编辑网站内的文本部分，并且客户用户能够看到编辑结果。

Answer 1

您需要可编辑的资源需要存储在某个地方。无论是数据库还是您正在阅读的 Markdown 文件 - 这取决于您。

然后，一旦您存储了该信息，您就可以从您的前端应用程序中请求它。用户将能够导航到请求并显示该资源的页面。

在您的管理界面中，您还可以创建一个视图，在该视图中加载您要编辑的内容，然后将修改后的内容发送回最初存储的位置。

也就是说，您可以写入文件或向后端发送一个 POST 请求，后端会将其写入您的数据库，这样当用户再次请求它时，它将包含更新、编辑的信息。

同样的原则也可以应用于其他类型的资源 - 例如。对于结构化数据，您可以使用一个简单的 JSON 文件，您可以读取然后写入或使用数据库。

根据您的问题，您很可能刚刚开始，尤其是后端方面，您可能想要研究像 Firebase 这样的解决方案，您可以在其中以相当简单的方式直接从前端代码使用和操作数据。

Answer 2

我在一个套牌构建网站上这样做。您可以选择两个选项，这取决于您是否要使用 Redux。

无论你选择哪个方向，解决方案都是相似的。唯一改变的是逻辑在哪里。使用 redux，它将在减速器中。没有它，逻辑将在您的组件中。我个人喜欢使用 redux，因为如果您的 UI 发生变化，您不必再纠结以使您的网站再次运行，并且由于 useSelector 钩子可用于轻松提取父组件和子组件中的 redux 值，它可以将组件与子组件分离不会污染您的道具或构建上下文提供程序。

您将需要一个点击离开的侦听器组件，例如 https://www.npmjs.com/package/react-click-away-listener。

没有redux：

import * as React from 'react'
import ClickAwayListener from 'react-click-away-listener'

const MyComponent = (props) => {
  const [isEditingField, setIsEditingField] = React.useState(false)
  const [value, setValue] = React.useState('')

  const handleClick = (event) => {
    setIsEditingField(true)
  }

  const handleClickAway = (event) => {
    setIsEditingField(false)
  }

  return <div>
    {editing && <ClickAwayListener>
      <input
        type="text"
        onChange={setValue}
        onClick={handleOnClick}
      />
    </ClickAwayListener>
  </div>}

  {!editing && <p>
    {value}
  </p>}
}

请记住，您可能会使用如下所示的某种钩子来消除输入的抖动。这会在用户每次输入输入时阻止输入执行 Web 请求。

import * as React from 'react'

export const useDebounce = (
  value,
  setValue,
  timeout = 100,
) => {
  React.useEffect(() => {
    const timeoutId = setTimeout(() => setValue(), timeout)

    return () => clearTimeout(timeoutId)
  }, [value])
}

您还需要研究 React 中的短路条件渲染。这是当您在该组件的返回值中执行上述技术时。即{booleanValue && <JSX /> 或{!booleanValue && <JSX />}。在 React 中拥有非常干净的渲染代码是一种很好的方式。

如果你决定使用 redux，你需要做的远不止这些。