Javascript 在React（JSX）中写入多行if

我正在制作一个非常简单的react组件“Clicker”，它被渲染到应用程序中

它只是一个H1，在点击按钮时生成的2后面有一个随机数

如果选择的数字是7，我希望它显示winner

我不明白为什么我的if语句在这种情况下不起作用。我曾经写过三元函数，如果它以前在这里，它是好的，我一定是错过了一些小的东西，它不工作

多谢各位

import React, { Component } from 'react';

class Clicker extends Component {
    constructor(props){
        let num = Math.floor(Math.random() * 10);
        super(props);
        this.state = { num: num };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        this.setState({winner:0});
    }

    render() {
        let num = Math.floor(Math.random() * 10);
        return(
         <div>
        <h1>Number is {num}</h1>
        <button onClick={this.handleClick}>Random Number</button>
        if (this.state.num === 7) {
            <h2>Winner!</h2>
        }
         </div>   
        );
    }
}[website render][1]


export default Clicker;

import React，{Component}来自'React'；
类Clicker扩展组件{
建造师（道具）{
设num=Math.floor（Math.random（）*10）；
超级（道具）；
this.state={num:num}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
this.setState（{winner:0}）；
}
render（）{
设num=Math.floor（Math.random（）*10）；
返回(
数字是{num}
随机数
if（this.state.num==7）{
赢家
}
);
}
}[网址][1]
导出默认点击器；

您需要将

if

放在大括号内，甚至更好

{this.state.num === 7 && <h2>Winner!</h2>}

{this.state.num==7&&Winner！}

渲染函数中的

启动JSX块

JSX中的所有内容都编译为HTML，除非它在

{…}

中，在这种情况下，它被视为JavaScript表达式

您没有将

if

放在

{…}

中（因此它在HTML中被视为文本），即使您这样做了，它也将是一个语句，而不是表达式，因此在那里无效

---

如果要使用

If

，则需要在JSX之外执行，并使用

{…}

将结果放入JSX：

let num = Math.floor(Math.random() * 10);
let winner = "";
if (this.state.num === 7) {
    winner = (<h2>Winner!</h2>);
}

return (
   <div>
      <h1>Number is {num}</h1>
      <button onClick={this.handleClick}>Random Number</button>
      {winner}
   </div>   
);

---

您需要

{

和

}

围绕您的嵌入式JavaScript运行。这会告诉JSX编译器将出现一个表达式

&&

和

？？

是在左侧值为真时返回右侧值的运算符

    <h1>Number is {num}</h1>
    <button onClick={this.handleClick}>Random Number</button>
    {(this.state.num === 7) && <h2>Winner!</h2>}
     </div>   
    );

编号为{num}
随机数
{（this.state.num==7）&&Winner！}
);

供参考，这称为“条件渲染”。

    <h1>Number is {num}</h1>
    <button onClick={this.handleClick}>Random Number</button>
    {(this.state.num === 7) && <h2>Winner!</h2>}
     </div>   
    );