React组件使用三元运算符报错：需返回有效React元素

你的代码存在两个关键问题导致了这个报错：

• render方法未返回元素：你通过三元表达式生成了React元素，但没有用return语句把它返回出去。React要求组件的render方法必须返回一个有效的React元素（或null/undefined），当前代码里render执行完后没有任何返回值，因此触发报错。
• 多行JSX的语法隐患：跨多行的JSX表达式容易触发JavaScript的自动分号插入（ASI）机制，导致三元运算的逻辑被打断，无法正确解析完整的表达式。

修正后的代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

class TonightsPlan extends React.Component {
  render() {
    // 用括号包裹多行JSX，同时添加return返回结果
    return (
      fiftyFifty ?
      <h1>Tonight I'm going out WOO</h1> :
      <h1>Tonight I'm going to bed WOOO</h1>
    );
  }
};

ReactDOM.render(<TonightsPlan/>, document.body);

如果偏好更简洁的单行写法，也可以这样写（无需括号）：

render() {
  return fiftyFifty ? <h1>Tonight I'm going out WOO</h1> : <h1>Tonight I'm going to bed WOOO</h1>;
}

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