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

Question

I'm new to web development and I can't seem to find much information on this.

So me and my project group are building an e-commerce website using React. So far there are 'customer users' and a few 'admin users'. The website is one single application and the different user types (customer and admin) will be separated by private routes so they will each have pages only that user type can access.

Im going to have a page called "Terms and conditions" that will hold a big piece of text containing the companies terms and conditions. I want the admin user to be able to edit the text within that page (component) from another page (component).

For me to do this, will I need to store that editable text as a string in a database and edit it there, or is there a way of storing it within the application? Storing it in the application is the preferred option.

Long story short I want an admin user to be able to edit sections of text within the website and the customers users to be able to see the results of the edit.

Answer 1

The resource you need to be editable needs to be stored somewhere. Whether that is a database or just a Markdown file you are reading - it's up to you.

Then once you have that information stored, you can request it from your frontend application. Users will be able to navigate to a page where that resource will be requested and shown.

In your admin interface you can also create a view in which you load the contents you want to edit and then send the modified back to where it was originally stored.

That is, you can write to the file or send a POST request to your backend which will write it to your database, so that when users will request it again it will contain the updated, edited information.

The same principle can be applied to other types of resources as well - eg for structured data you can use a simple JSON file that you read and then write or use a database.

Based on your question you are most likely just starting out especially with the backend side of things, you might want to look into solutions like Firebase where you can consume and manipulate data right from your frontend code in a rather easy manner.

Answer 2

I do this in a deck building website. There are two options you can choose from and it depends on if you want use use Redux or not.

No matter which direction you choose, the solution is similar. The only thing that does change is where the logic is. With redux it is going to be in a reducer. Without it, the logic will be in your component. I personally like using redux because if your UI changes, you have less to de-tangle to get your site working again and it decouples components from children due to the useSelector hook being available to pull redux values in parent components and children components easily without contaminating your props or building a Context provider.

You will need a click away listener component like so https://www.npmjs.com/package/react-click-away-listener .

Without 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>}
}

Keep in mind that you will probably be debouncing your input with some kind of hook like this one below. This stops the input from doing a web request every time the user types into the input.

import * as React from 'react'

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

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

You will also want to look into short-circuit conditional rendering in React. This is when you do the technique above in the return value of that component. ie {booleanValue && <JSX /> or {!booleanValue && <JSX />} . It is a nifty way to have very clean render code in React.

If you do decide to use redux, you would need to do a lot more than this.