如何在 React Navbar 中显示变量？

Question

如何在 中显示变量 temp？使用 $ 或 "$" 不起作用，只显示字符串

我需要在导航栏中有天气查找功能吗，我需要做更多的链接吗？我是 Web 开发的初学者，如果有明显问题，我很抱歉。

imports...
...

weather.find({degreeType: 'F',search: ''}, function(err, result) {
  if(err) console.log(err);
  //console.log(result[0].current.feelslike)

  const temp = result[0].current.feelslike
});

export default function NavBar (){
  const [show, setShow] = useState(false)
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
    return(
      
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
         <Navbar.Brand as={NavLink} to= '/' className={"px-3"}>
           <h4 className={"fontSize4"}>Home</h4>
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="responsive-navbar-nav" />
         <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
              <NavDropdown title= "Tools" className={"px-3 h3"} id="collasible-nav-dropdown">
...
...
...

              <Navbar.Text>
                "$temp"
              </Navbar.Text>
         </Navbar>
    );
  
}

谢谢

Answer 1

临时变量需要用括号括起来，并在与它使用的范围相同的范围内声明。现在，唯一可以访问 temp 变量的是您在 const temp = result[0].current.feelslike 之后放置的任何代码。

您需要做的是将 weather.find() 移动到 NavBar 类中（就像您在评论中提到的那样），并为 temp 变量创建一个新的挂钩，以便对其进行更新。使用钩子而不是声明变量允许 React 在渲染时更改变量。

export default function NavBar (){
  ... other code
  const [temp, setTemp] = useState(0);

  weather.find({degreeType: 'F',search: ''}, function(err, result) {
    if(err) console.log(err);
    setTemp(result[0].current.feelslike)
  });
    return(
      ... other code
      {temp}
      ... other code
    );
}

还有一点需要注意：

每当你设置一个类名属性时，你不需要在类名周围加上括号。只需要引号。

className="nameOfCSSClass"

如果您希望主页按钮的字体大小为 4（非常小），那么您也可以执行以下操作：

<p style={{fontSize: 4}}>Home</p>

或者直接去掉 className 属性，因为一个 h4 标签会使字体变成你需要的大小。