Напишите команды javascript в методе компонента render ()

Я пытаюсь вернуть элемент HTML или другой в зависимости от некоторых условий, рассчитанных на Javascript. Я пробовал это сделать, но не могу начать с условия и если, не понимаю почему. Мой компонентный файл таков:

import React from 'react';
import defaultImage from './defaultImage.jpg';

export default class Game extends React.Component {
    render() {
        const image = this.props.question.attachment.url;
        const tips = this.props.question.tips;

        return (
            <div className = "flexDisplay">
                <img src = {image === (null || "") ? defaultImage : image} className = "questionImage centerVertical" alt = "Error loading, just read the question" />
                <div className = "centerHorizontal centerVertical">
                    <h1>{this.props.question.question}</h1>
                    <h2 className = "centerHorizontal">Pistas:</h2>   
                    {   
                        if (tips.length === 0){ //The problem comes here
                            return <div>No hay pistas disponibles</div>
                        }else{
                            tips.map((tip, i,) => {
                                return <div className = "centerHorizontal" key = {tip.toString()}>{i+1}. {tip}</div>;
                            })
                        }
                    }
                </div>
            </div>
        );
    }

Кто-нибудь заметил проблему?

javascript reactjs render

08.12.2018 21:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы не можете использовать операторы if внутри синтаксиса JSX. Вместо этого вы можете использовать тернарный оператор, который в основном выполняет то же самое:

{
tips.length === 0 ? 
  (<div>No hay pistas disponibles</div>)
: (tips.map((tip, i,) => {
  return <div className = "centerHorizontal" key = {tip.toString()}>{i+1}. {tip}</div>;
  }));
}

08.12.2018 22:00

Вы не можете использовать «if» во встроенных условных операторах в jsx. Однако вместо этого вы можете использовать тернарный синтаксис:

{   
    tips.length === 0 ? (
        return <div>No hay pistas disponibles</div>
    ) : (
        tips.map((tip, i,) => {
            return <div className = "centerHorizontal" key = {tip.toString()}>{i+1}. {tip}</div>;
        })
    )
}

Вы можете узнать больше об использовании встроенных условных операторов здесь: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

08.12.2018 22:01

Ответ принят как подходящий

В компоненте ReactJS (JSX) вам не разрешено использовать ничего, кроме оператора, возвращающего значение.

Вы можете вообразить логику, пытаясь присвоить переменную:

const result = if ( a ) { "b" } else { "c" } // won't work

Но с другой стороны, с Тернарный оператор будет.

const result = a ? "b" : "c";

Итак, в вашем случае есть два пути достижения цели:

{ tips.length === 0 ? ( <div>No hay pistas disponibles</div> ) : (
     tips.map((tip, i) => ( 
         <div className = "centerHorizontal" key = { tip.toString() }>{i+1}. {tip}</div>
     ) )
) }

Или вы можете просто извлечь это в методе

renderTips( tips ) {
    if ( tips.length === 0 ) { return null; }
    return tips.map( ( tip, i ) => (
        <div className = "centerHorizontal" key = { tip.toString() }>{i+1}. {tip}</div>
    );
}

render() {
   ...
   return (
       ...
       { this.renderTips( tips ) }
   )
}

Стоит отметить, что если бы они решили использовать тернарный код внутри JSX, они также могли бы сделать что-то вроде: {tips.length === 0 && <div>No hay pistas disponibles</div>}, который вернет div, если tips.length равен нулю. В данном конкретном случае их должно быть два, что не идеально, но об этом стоит упомянуть!

— 08.12.2018 23:17

08.12.2018 22:11