javascript - 在 render() 组件方法上编写 javascript 命令

Question

我试图根据在 Javascript 上计算的某些条件返回一个 HTML 元素或另一个元素。我试过这样做，但我不能以 if 开始条件，我不明白为什么。我的组件文件是这个:

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>
        );
    }

有人发现问题吗？

Answer 1

你不能在 JSX 语法中使用 if 语句。相反，您可以使用基本上完成相同的三元运算符:

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