Условия
1-ый способ: if else
Если надо выполнить условия то можно воспользоваться стандартными выражением if else
.
class Message extends React.Component { constructor(props) { super(props); } render() { let message = "Текст для гостя"; if (this.props.isLogged) { message = "Текст для авторизованного пользователя"; } return ( <div> <p>{message}</p> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Message isLogged={true} />);
2-ой способ: JSX
Аналогичное условие можно сделать в JSX.
// пример сайта know-online.com class Message extends React.Component { constructor(props) { super(props); } render() { return ( <div> <p>{this.props.isLogged && 'Текст для авторизованного пользователя' || 'Текст для гостя'}</p> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Message isLogged={true} />);
3-ий способ: тернарный оператор
Также можно реализовать через тернарный оператор.
// пример сайта know-online.com class Message extends React.Component { constructor(props) { super(props); } render() { return ( <div> <p>{this.props.isLogged ? 'Текст для авторизованного пользователя' : 'Текст для гостя'}</p> </div> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Message isLogged={true} />);
Пример использования:
import React, { useState } from 'react'; function App() { const [isChecked, setIsChecked] = useState(false); return ( <> <button onClick={() => setIsChecked(!isChecked)}>Отметить пункт</button> {isChecked ? "Пункт отмечен" : "Не отмечено"} </> ) }
В методе setIsChecked()
перед параметром указывается «!», что означает, что надо задавать противоположное значение (т.е. если сейчас состояние isChecked
равен true
, то в метод будет передано false
)
Поддержать автора