Условия
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} />);
Авторизуйтесь, чтобы добавлять комментарии