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

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

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

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

要做到这一点，我需要将可编辑文本作为字符串存储在数据库中并在数据库中进行编辑，还是有办法将其存储在应用程序中？将其存储在应用程序中是首选选项

---

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

需要编辑的资源需要存储在某个地方。无论这是一个数据库或只是一个标记文件，你正在阅读-这取决于你

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

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

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

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

---

根据您的问题，您很可能刚刚开始，尤其是在后端方面，您可能希望研究Firebase之类的解决方案，在这种解决方案中，您可以以一种相当简单的方式使用和操作前端代码中的数据。

我在一个构建平台的网站上这样做。有两个选项可供选择，这取决于是否要使用Redux

无论您选择哪个方向，解决方案都是相似的。唯一能改变的是逻辑在哪里。在redux中，它将位于减速器中。没有它，逻辑将在您的组件中。我个人喜欢使用redux，因为如果用户界面发生变化，您无需太多纠结就可以让站点重新工作，而且它将组件与子组件分离，因为

useSelector

钩子可以轻松提取父组件和子组件中的redux值，而不会污染您的道具或构建上下文提供程序

您将需要一个像这样的clickaway侦听器组件

没有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>}
}

您还需要查看React中的短路条件渲染。这是当您在该组件的返回值中执行上述技术时。i、 e

{booleanValue&&

或

{！booleanValue&&}

。在React中使用非常干净的渲染代码是一种很好的方法

---

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

你不能只在前端做事情，而期望它在其他人的设备上被更改。其他人的计算机如何知道管理员在他们的计算机上做了什么？如果它没有存储在后端，它将不会在不同的前端设备之间共享。所以将T&C存储在DB中，然后在管理员更改它们时在那里更新。查看内容管理系统或CMS。我听说ghost应该很好。我的项目组已经有了一个与Mongodb排序的后端，我正在处理前端。对我来说，只使用DB是有意义的？@Tom如果已经有一个带有数据库的后端，你可以需要要求后端人员为您提供可与之通信的端点。您需要一个端点响应

GET

请求，您可以使用该请求检索该数据，另一个端点响应

PUT

（或

补丁

）请求您可以用来更新数据。在大多数情况下，如果您正在构建管理员界面，则可能需要每个资源的一整套CRUD终结点。此编辑是否对其他用户可见？以及是否保持永久性？如果您希望仅由管理员对其进行编辑，则必须实现存储user在应用程序中的某个位置而不是在浏览器中的角色（因为这会让人很容易伪装成管理员）.Authentication已超出此问题的范围。如果您想进行任何形式的身份验证，我强烈建议您使用google帐户或其他形式的oauth进行身份验证。这还需要一个后端，并检查用户是否在受保护的端点上进行了身份验证。您也可以使用/logi创建一个简单的后端n和/注销端点如果这只是一个学校项目，你需要学分。只需知道它不会安全。因此，如果安全是分数的一个因素，请坚持使用谷歌的oauth服务。以下是oauth与谷歌的说明。听起来这个应用程序很复杂。我真的建议你和你的小组一起学习，并使用诸如redux thunk或redux sagas之类的中间件来处理web请求。

import * as React from 'react'

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

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