React JS 中的 if 语句

在 React JS 中，if 语句可以使用 JSX 中的三目运算符、if/else 语句或与运算符来实现。下面将分别介绍这三种方法的实现方式。

JSX 中的三目运算符

render() {
  return (
    <div>
      {condition ? 
        (<h1>This is true</h1>) : 
        (<h1>This is false</h1>)}
    </div>
  );
}

如果 condition 为 true，则 <h1>This is true</h1> 将被渲染。否则 <h1>This is false</h1> 将被渲染。

if/else 语句

render() {
  if (condition) {
    return <h1>This is true</h1>;
  } else {
    return <h1>This is false</h1>;
  }
}

使用 if/else 语句实现时，需要将代码包裹在一个函数中，然后使用返回值来渲染子组件。

与运算符

render() {
  return (
    <div>
      {condition && (<h1>This is true</h1>)}
      {!condition && (<h1>This is false</h1>)}
    </div>
  );
}

使用与运算符实现时，如果 condition 为 true，则 <h1>This is true</h1> 将被渲染。否则 <h1>This is false</h1> 将不会被渲染。需要注意的是，如果换成或运算符，则会造成错误的渲染行为。

以上三种方式都可以实现 if 语句的效果，开发者可以根据实际情况灵活选择。