Как использовать переменные в React.js?

Пользователь

от kurt , в категории: JavaScript , 6 месяцев назад

Как использовать переменные в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от quinton.prosacco , 4 месяца назад

@kurt 

В React.js можно использовать переменные, как и в обычном JavaScript.

  1. Объявление переменных:


Переменные в React.js объявляются с помощью ключевого слова let или const.

1
2
let name = "John";
const age = 30;


  1. Использование переменных в JSX:


Для использования переменных в JSX необходимо заключить их в фигурные скобки.

1
2
3
4
5
6
7
8
const name = "John";
const age = 30;
return (
  <div>
    <p>{name}</p>
    <p>{age}</p>
  </div>
);


  1. Использование переменных в компонентах:


Переменные могут быть использованы в компонентах. Например, если нужно изменять состояние компонента в зависимости от значения переменной:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function App() {
  const [display, setDisplay] = useState(false);
  
  const handleClick = () => {
    setDisplay(!display);
  }
  
  return (
    <div>
      {display ? <p>Displayed!</p> : null}
      <button onClick={handleClick}>Toggle display</button>
    </div>
  );
}


В этом случае, при клике на кнопку, переменная display изменяется, и компонент перерисовывается с учетом нового значения.