使用react有条件地将页面设为只读

Question

我想创建一个具有可编辑和只读版本的 React 网页，整个页面而不仅仅是页面上的几个元素。根据用户 ID 和其他条件向用户显示版本。我该怎么做？

我知道的唯一直接的方法是创建 2 个页面，一个可编辑，一个只读，并根据条件向用户显示适当的版本（html 页面）。

有没有更好、更聪明的方法来做到这一点？就像我可以为两个版本创建一个页面并根据用户的条件切换模式吗？

Answer 1

您的问题应该提供您尝试过的一些代码的示例，但根据描述，下面是许多可能的解决方案之一的非常粗略的示例。

假设

EditView

组件是您的页面，您可以根据您需要应用的任何凭证传递

permission

的值。

然后您有一个组件

ExampleField

，它采用

permission

并显示输入或静态文本。多个这些字段的集合是从理论数据数组映射而来的，您必须从某处获取这些数据，并且

fields

由主组件返回。

const EditView = ({permission}) => {
  const [editable, setEditable] = useState();
  const [values, setValues] = useState([]);
  
  useEffect(() => {
    setEditable(permission);
  }, [permission]);

  useEffect(() => {
    //maybe fetch your data from a back end or whatever and assign it to `values`
    //on page load
  }, [])
  
  const ExampleField = ({permission, val, index}) => {
     const handleChange = (e) => {
       let vals = [...values];
       vals[index] = val;
       setValues(vals);
     }
     return(
       <>
         {permission
          ? <input name="example" type="text" defaultValue={val}
              onChange={handleChange} />
          : <span>{val}</span>}
       </>
     )
  }
  
  const fields = values.map((value, i) => {
    return <ExampleField permission={permission} val={value} index={i}/>
  })
  
  return(
          <>
           {fields}
          </>
  )
}

最有可能的是，您希望将各种字段组件分解到自己的文件中，并且您可能希望探索

useState

或

useContext

类型功能来提升状态并执行所有操作，而不是使用

useStore

反应事物。

*尚未测试甚至编译此代码 - 仅用于说明目的。