在反应 （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）的运算符。{}&&??

    <h1>Number is {num}</h1>

    <button onClick={this.handleClick}>Random Number</button>

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

     </div>   

    );

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

    winner = (<h2>Winner!</h2>);

}

return (

   <div>

      <h1>Number is {num}</h1>

      <button onClick={this.handleClick}>Random Number</button>

      {winner}

   </div>   

);

如果你想内联使用它，那么你需要一个表达式，你需要把它放进去{ ... }

      <button onClick={this.handleClick}>Random Number</button>

      {this.state.num === 7 ? (<h2>Winner!</h2>) : ""}

Answer 3

你需要把你的内牙套甚至更好if

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