基于用户的屏幕打开模式（即查看、编辑、创建）在反应应用程序中显示/隐藏、启用/禁用组件的更好方法是什么

Question

I am working on a react application and I want code design related suggestions and feedback like what can be better ways to handle following work.

I have a react application in which I want to hide/show, disable/enable html elements based on user's screen open mode. For example: My application has data filters which I have to hide when user open mode is view but want to show them when open mode is edit or create . Similarly I want to disable textFields when screen open mode is view and enable them when mode is edit or create .

Now I have implemented above work like this, in which children are shown when mode is not view.

My questions are:

1. Is this a correct approach used to show and hide elements based on screen open mode??
2. Some elements I want to disable but not hide ie like textFields should show only label, comboboxes elements should be disabled but not hidden. What can be ways to achieve this, other than disabling each individual component with disabled prop.

Any help will be appreciated.

interface Props {
  mode?: 'view' | 'edit' | 'create',
  children: React.ReactElement,
}

const AccessControl = (props: Props) => {
  if (props.mode !== "view") {
    return props.children;
  }

  return null;
}

export default AccessControl;

<AccessControl mode="view">
   <TextField
     name="name"
     value={this.state.name}
     id="name"
   />
</AccessControl>

Thank you.

Answer 1

I would use a display: (mode==='view')? 'block' | 'none' display: (mode==='view')? 'block' | 'none' display: (mode==='view')? 'block' | 'none' to implement the same idea, because it is much faster for the browser to show or hide an element than for you to load in something new.

Say if you had an external resource in a div that is not cached, every time you are switching modes, you are adding a new element into the DOM and the browser will fire off a request to obtain some data. Hiding a div means you don't have to call this external resource again.

With disabling - there's no 'disable' attribute to elements, so you'll have to pass something through to the component for it to implement.