如何允許用戶在 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，您需要做的遠不止這些。