Блог

Как я могу отобразить переменную temp внутри <Navbar.Text> ? Использование $ или «$» не работает и просто показывает строку

Нужно ли мне иметь функцию поиска погоды внутри панели навигации, нужно ли мне делать больше ссылок? Я новичок в веб-разработке, поэтому прошу прощения, если это что-то очевидное.

 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>
    );
  
}
  

Спасибо

Временная переменная должна быть заключена в квадратные скобки и объявлена в той же области, в которой она используется. Прямо сейчас единственное, что имеет доступ к переменной temp, — это любой код, который вы помещаете после const temp = result[0].current .похоже.

Что вам нужно сделать, это переместить 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, вам не нужно заключать имя класса в квадратные скобки. Нужны только кавычки.

 className="nameOfCSSClass"
  

Если вы хотите, чтобы кнопка home имела размер шрифта 4 (что действительно мало), вы также можете сделать что-то вроде этого:

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

или просто удалите атрибут className все вместе, потому что тег h4 сделает шрифт нужного вам размера.