如何在 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 class（就像你在评论中提到的那样），并为临时变量创建一个新的钩子，这样它就可以被更新。使用钩子而不是声明变量允许 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 属性，都不需要将 class 名称括起来。只需要引号。

className="nameOfCSSClass"

如果您希望主页按钮的字体大小为 4（确实很小），那么您也可以这样做：

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

或者干脆把 className 属性一起去掉，因为 h4 标签会让字体变成你需要的大小。

如何在 React Navbar 中显示变量？

How To Display Variable in React Navbar?

html

javascript

navbar

reactjs

react-bootstrap