我是web开发的新手，似乎找不到太多关于这方面的信息。
因此，我和我的项目组正在使用React构建一个电子商务网站。到目前为止，有"客户用户"和一些"管理员用户"。该网站是一个单一的应用程序，不同的用户类型(客户和管理员(将通过私人路线分开，因此每个用户类型都有只能访问的页面。
我将有一个名为"；条款和条件"；这将包含一大块包含公司条款和条件的文本。我希望管理员用户能够从另一个页面(组件(编辑该页面(组件中的文本。
为了做到这一点，我需要将可编辑文本作为字符串存储在数据库中并在那里进行编辑吗？或者有没有一种方法可以将其存储在应用程序中？将其存储在应用程序中是首选选项。
长话短说，我希望管理员用户能够编辑网站中的文本部分，客户用户能够看到编辑的结果。
需要编辑的资源需要存储在某个地方。无论是数据库还是Markdown文件，都由您自己决定。
然后，一旦存储了这些信息，就可以从前端应用程序中请求。用户将能够导航到将请求并显示该资源的页面。
在您的管理界面中，您还可以创建一个视图，在其中加载要编辑的内容，然后将修改后的内容发送回最初存储的位置。
也就是说，您可以写入文件或向后端发送POST请求，后端会将其写入数据库，这样，当用户再次请求时，它将包含更新的、编辑过的信息。
同样的原理也可以应用于其他类型的资源——例如，对于结构化数据，您可以使用一个简单的JSON文件，然后读取并写入，或者使用数据库。
根据你的问题，你很可能刚刚开始，尤其是从后端开始，你可能想研究像Firebase这样的解决方案，在那里你可以以一种相当简单的方式直接从前端代码中消费和操作数据。
我在一个甲板建筑网站上做这件事。有两个选项可供选择，具体取决于您是否希望使用Redux。
无论你选择哪个方向，解决方案都是相似的。唯一改变的是逻辑在哪里。有了redux，它将在一个reducer中。如果没有它，逻辑将在您的组件中。我个人喜欢使用redux，因为如果你的UI发生了变化，你就不用太多纠缠来让你的网站重新工作，而且它可以将组件与子组件解耦，因为useSelector钩子可以很容易地在父组件和子组件中提取redux值，而不会污染你的道具或构建上下文提供程序。
你需要一个点击式监听器组件https://www.npmjs.com/package/react-click-away-listener.
无冗余：
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中的短路条件渲染。这是当您在该组件的返回值中执行上述技术时。即CCD_ 2或CCD_。这是一种在React中拥有非常干净的渲染代码的好方法。
如果你真的决定使用redux，你需要做的远不止这些。