在render（）组件方法上编写javascript命令

我试图返回一个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>
        );
    }

有人发现了问题吗？

您不能在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>;
  }));
}

不能在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>;
  }));
}

---

您不能在jsx中的内联条件语句中使用if。但是，您可以改用三元语法：

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

---

您可以在此处阅读有关使用内联条件语句的更多信息：

您无法在jsx的内联条件语句中使用if。但是，您可以改用三元语法：

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

---

您可以在此处阅读有关使用内联条件语句的更多信息：

在ReactJS的组件JSX中，除了返回值的语句之外，不允许使用任何其他语句

您可以通过尝试分配变量来想象逻辑：

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

但从另一方面来说，它也会

因此，在您的案例中，有两种实现目标的方法：

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

---

在ReactJS的组件JSX中，除了返回值的语句之外，不允许使用任何其他语句

您可以通过尝试分配变量来想象逻辑：

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

但从另一方面来说，它也会

因此，在您的案例中，有两种实现目标的方法：

{ 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&&No hay pistas disponsibles}，如果tips.length为零，则返回div。对于这个特定的案例，他们必须有两个这样的，这并不理想，但值得一提！值得注意的是，如果他们决定在JSX中使用三元结构，他们还可以执行类似的操作：{tips.length==0&&No hay pistas disponsibles}，如果tips.length为零，则返回div。对于这个特定的案例，他们必须有两个这样的，这并不理想，但值得一提！