在 reactjs 中的 html 内的方法中设置局部变量

Question

我有这个方法渲染，我在其中创建一个局部变量category。我需要在 html 中使用 JSX 在 return 语句中设置这个变量的值。

我正在使用大括号将值分配给局部变量，但这对我不起作用。例如{category='business'}

这就是我目前正在做的事情

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

这个会在屏幕上显示类别。

注意：我知道有多种方法可以实现这一点，但我想知道如何在我的方法中设置局部变量

Answer 1

1. 首先，看看功能组件。
2. Route 组件需要一个组件，而不是逻辑。通过 react-router 的 useLocation 钩子处理该组件或其他地方的实际变量更改。

您尝试做的是更改变量的状态。提示 React 的 useState 和 useEffect 钩子（该组件必须是函数式组件才能使钩子工作）。

首先导入钩子：

import { useState } from 'react';

那么，在你的情况下：

const [category, setCategory] = useState('about') // initial value

以及何时需要更新：

setCategory('science') // new value