JSX条件渲染实现报错求助：三元表达式代码无效

嘿，我来帮你揪出问题所在～你写的代码里有个很容易踩的小坑：JSX的大括号{}里是表达式上下文，不是函数体，不需要写return关键字。

你原来的代码：

<div>{ return this.props.date === null ? 'NO IDEA' : this.props.date }</div>

这里的return是多余的，因为大括号里只需要直接写要渲染的表达式就行，加了return会导致语法错误，浏览器根本解析不了这段JSX。

正确的写法 #

直接去掉return，保留三元表达式就可以正常工作了：

<div>{ this.props.date === null ? 'NO IDEA' : this.props.date }</div>

如果你的组件是函数式组件（现在更常用的写法），代码会是这样：

<div>{ props.date === null ? 'NO IDEA' : props.date }</div>

额外的优化写法 #

如果你的场景是判断date为null或undefined时显示"NO IDEA"，可以用ES6的空值合并运算符??让代码更简洁：

<div>{ this.props.date ?? 'NO IDEA' }</div>

要是条件逻辑比较复杂，还可以提前把渲染内容存到变量里，让JSX更清爽：

// 类组件里
render() {
  const displayContent = this.props.date === null ? 'NO IDEA' : this.props.date;
  return <div>{ displayContent }</div>;
}

// 函数组件里
const MyComponent = (props) => {
  const displayContent = props.date === null ? 'NO IDEA' : props.date;
  return <div>{ displayContent }</div>;
}

核心记住：JSX大括号里只能放可以求值的表达式，不能放语句（比如return、if语句这类）。

内容的提问来源于stack exchange，提问作者user6398538