Написание команд javascript для метода компонента render () - PullRequest
Новая
       5

Написание команд javascript для метода компонента render ()

0 голосов
/ 08 декабря 2018

Я пытаюсь вернуть элемент 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>
        );
    }

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

Ответы [ 3 ]

0 голосов
/ 09 декабря 2018

Вы не можете использовать «если» во встроенных условных выражениях в 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

0 голосов
/ 09 декабря 2018

В компоненте 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 ) }
   )
}
0 голосов
/ 09 декабря 2018

Вы не можете использовать 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>;
  }));
}
...