React Native渲染方法用let还是var？JSX无法使用多语句JS代码？

嘿，我来帮你解答这两个React Native里的常见问题！

1. 在React Native的render方法内部应该使用let还是var？ #

在现代JavaScript（包括React/React Native依赖的ES6+规范）里，强烈推荐用let或者const代替var，原因主要有这几点：

• var是函数作用域，存在变量提升的特性，在render这类函数中，如果在多个代码块（比如if、for）里用var声明变量，很容易出现变量被意外覆盖的情况，导致难以排查的bug。
• let是块级作用域，它的作用范围只局限在当前代码块（{}包裹的区域）内，不会泄露到外部，代码逻辑更清晰、更安全。
• 如果变量的值不需要被重新赋值，优先用const，它能确保变量不会被意外修改，进一步提升代码的可靠性。

举个直观的例子：

render() {
  if (true) {
    var testVar = "var";
    let testLet = "let";
  }
  console.log(testVar); // 能输出"var"，因为var是函数作用域
  console.log(testLet); // 报错，因为let是块级作用域，此处无法访问
}

所以在render方法里，尽量用let（需要重新赋值时）或const（值固定时），别再用var啦。

2. 为什么无法在JSX中使用多条语句？ #

你遇到的问题核心是：JSX中的花括号{}只能容纳JavaScript表达式，不能直接放置语句。

简单区分一下：

• 表达式是能返回一个具体值的代码，比如array.map(...)（返回数组）、a + b（返回计算结果）、三元运算符condition ? A : B（返回其中一个分支的值）；
• 而像let a = 5（变量声明语句）、if(...) {...}（条件判断语句）这类都是语句，它们不会返回值，所以直接放在JSX的{}里会触发语法错误。

针对你的需求，有几种常用的解决方式：

方式1：把逻辑提到render的return外部 #

先在render函数里处理好变量和条件判断，再把结果注入到JSX中：

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    // 在这里处理所有逻辑
    let content;
    const a = 5;
    if (a === 5) {
      content = <Text>hello</Text>;
    } else {
      content = <Text>other content</Text>;
    }

    return content;
  }
}

方式2：用三元运算符（适合简单条件） #

如果逻辑比较简单，直接用三元表达式放在JSX的花括号里：

render() {
  const a = 5;
  return (
    <>
      {a === 5 ? <Text>hello</Text> : <Text>other</Text>}
    </>
  );
}

方式3：用立即执行函数表达式（IIFE，适合复杂逻辑） #

如果一定要在JSX内部写多语句逻辑，可以把它们包在一个立即执行的函数里，函数会返回一个合法的表达式结果：

render() {
  return (
    <>
      {(() => {
        let a = 5;
        if (a === 5) {
          return <Text>hello</Text>;
        } else {
          return <Text>other</Text>;
        }
      })()}
    </>
  );
}

另外你提到array.map或filter能生效，是因为这些方法本身会返回一个数组（属于表达式），而数组在JSX里会被自动展开渲染成多个元素，所以完全没问题~

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