Javascript 这个jsx表达式的错误是什么？

在这里，我尝试进行某种条件渲染，因此我需要基于state属性dailyData值有一个不同的输出，但是为什么我不能像这样使用if语句呢

名为解析错误的编译时错误：意外标记

保持简单：

不能将if/else用作表达式。改用

---

首先，这不是JSX问题，而是JS语法错误。if语句不是表达式，因此不能将其指定给变量折线图

因此：

渲染{ 让线图； 如果！this.state.dailyData{ 线形图=加载； }否则{ 线形图=输出； } 回来 {lineChart} ; }

---

是语句和表达式之间的差异

此处应使用三元运算符

let lineChart = !this.state.dailyData ? <h1>Loading</h1> : <h1>Output</h1>

---

另外，您的封闭div标记应该是而不是

您的逻辑是好的，但是您编写它的方式不正确，并且包含语法错误。这里有两种方法可以让你实现你想要的

第一

第二

renderLineChart = () => {
  return !this.state.dailyData ? <h1>Loading</h1> : <h1>Output</h1>;
}

render(){
  return(<div className={container}>
           {this.renderLineChart()}  
         </div>);
}

let lineChart = !this.state.dailyData ? (<h1>Loading</h1>) : (<h1>Output</h1>)

let lineChart = !this.state.dailyData ? <h1>Loading</h1> : <h1>Output</h1>

render() {
  let lineChart = null;

  if (!this.state.dailyData) {
    lineChart = <h1>Loading</h1>;
  } else {
    lineChart = <h1>Output</h1>;
  }

  return (
    <div className={container}>
      {lineChart}  
    <div>
  );
}

render() {
  let lineChart = !this.state.dailyData 
    ? <h1>Loading</h1>
    : <h1>Output</h1>

  return (
    <div className={container}>
      {lineChart}  
    <div>
  );
}