React中如何在render方法的JSX返回内容内给局部变量赋值

问题原因 #

你当前的写法会把值展示到页面上，是因为JSX 中{ }内的表达式执行后的返回值会被React渲染到DOM中，而赋值表达式category='business'的返回值就是你赋的'business'字符串，因此会直接显示。

如果要在不触发渲染的前提下完成局部变量赋值，只需要让花括号内的表达式最终返回null或者undefined即可，React不会渲染这两种类型的值。

解决方案 #

最简单的实现方式是使用逗号运算符：逗号运算符会依次执行所有表达式，最终返回最后一个表达式的结果，你可以在赋值后加一个null作为最终返回值，修改后的代码如下：

export default class App extends Component {
  render() {
    let category = 'about';
    return (
      <Router>
        <div>
          <NavBar/>
          <Switch>
            <Route path="/about">
            </Route>
            <Route path="/business">
              {(category='business', null)}
            </Route>
            <Route path="/entertainment">
              {(category='entertainment', null)}
            </Route>
            <Route path="/general">
              {(category='general', null)}
            </Route>
            <Route path="/health">
              {(category='health', null)}
            </Route>
            <Route path="/science">
              {(category='science', null)}
            </Route>
            <Route path="/sports">
              {(category='sports', null)}
            </Route>
          </Switch>
          <News pageSize={5} country="in" category={category}/>
        </div>
      </Router>
    )
  }
}

你也可以选择用无返回值的立即执行函数实现，效果是一样的：

{(() => {
  category = 'business'
})()}

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