在反应 （JSX） 中编写多行

Question

我正在制作一个非常简单的反应组件“点击器”，呈现给App。

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

我希望它显示获胜者，如果选择的数字是7。

我无法弄清楚为什么我的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;

Answer 1

您需要并围绕您的嵌入式 Java 脚本才能使其正常工作。这告诉 JSX 编译器即将出现一个表达式。 并且是返回右手值（如果左手值为 true）的运算符。{}&&??&nbsp; &nbsp; <h1>Number is {num}</h1>&nbsp; &nbsp; <button onClick={this.handleClick}>Random Number</button>&nbsp; &nbsp; {(this.state.num === 7) && <h2>Winner!</h2>}&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;&nbsp; &nbsp; );

Answer 2

渲染函数中的 将启动 JSX 块。<div>JSX 中的所有内容都编译为 HTML，除非它位于内部，在这种情况下，它被视为 JavaScript 表达式。{ ... }你没有把里面放进去（所以它被视为HTML中的文本），即使你这样做了，它也将是一个语句，而不是一个表达式，因此在那里是无效的。if{ ... }如果要使用 ，则需要在 JSX 外部执行此操作，并使用 将结果放入 JSX：if{ ... }let num = Math.floor(Math.random() * 10);let winner = "";if (this.state.num === 7) {&nbsp; &nbsp; winner = (<h2>Winner!</h2>);}return (&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; <h1>Number is {num}</h1>&nbsp; &nbsp; &nbsp; <button onClick={this.handleClick}>Random Number</button>&nbsp; &nbsp; &nbsp; {winner}&nbsp; &nbsp;</div>&nbsp; &nbsp;);如果你想内联使用它，那么你需要一个表达式，你需要把它放进去{ ... }&nbsp; &nbsp; &nbsp; <button onClick={this.handleClick}>Random Number</button>&nbsp; &nbsp; &nbsp; {this.state.num === 7 ? (<h2>Winner!</h2>) : ""}

Answer 3

你需要把你的内牙套甚至更好if{this.state.num&nbsp;===&nbsp;7&nbsp;&&&nbsp;<h2>Winner!</h2>}