Блог

Главная - Вопросы по программированию - Способ визуализации нового компонента при нажатии в react js

Способ визуализации нового компонента при нажатии в react js

#javascript #reactjs

Вопрос:

Я пытаюсь отобразить новый компонент, нажав кнопку в react js. Я использую функциональные компоненты, и я не могу с этим справиться. Например: нахожусь в компоненте UserManagement и по щелчку кнопки мне нужно отобразить другой компонент с именем управление сотрудниками.

Комментарии:

1. можете ли вы поделиться кодом ? Я думаю, что условный рендеринг-это решение вашей проблемы.

Ответ №1:

Вы можете conditionally визуализировать свой компонент.

Пример :

EmployeeManagement.js

 const EmployeeManagement = () => {
   ....

   return (
    <div>
      EmployeeManagement
    </div>
  );
}

UserManagement.js

 const UserManagement = () => {
   const [hasRender, setRender] = useState(false);
   const onShow = React.useCallback(() => setRender(true), []);


   return (
     <>
      <button onClick={onShow}>Show Employee Management</button>
      {hasRender amp;amp; <EmployeeManagement />}
    </>
   )
}

Ответ №2:

используйте видимое состояние и переключите его в onClick:

 const [visible, setVisible] = useState(false)

onClick = () => {setVisible(true)}

затем сделайте это так:

 {visible amp;amp; <EmployeeManagement/>}

Ответ №3:

Одним из способов сделать это было бы добавить локальное состояние UserManagement ,
содержащее boolean значение, указывающее, должен ли компонент быть скрыт или показан.

Тогда у вас будет что-то вроде:

 function UserManagement() {
   const [compIsShown, setCompIsShown] = useState(false);

   return (
      // Whatever else you're rendering.
      <button onClick={() => setCompIsShown(true)}>...</button>
      {compIsShown amp;amp; <OtherComp />}
   )
}

Произойдет то,что compIsShown будет инициализировано как ложное,
таким образом, это условие compIsShown amp;amp; <OtherComp /> предотвратит его рендеринг.
Затем, когда вы нажмете кнопку, состояние установится, вызывая повторную визуализацию, за исключением того, что теперь условие будет истинным, поэтому <OtherComp> оно будет отображаться.

Есть и другие способы сделать это.
в основном зависит от варианта использования.

Метки: