React JS访问范围之外的id_lang变量？答案

【问题标题】：React JS Access id_lang variable outside of scope?React JS访问范围之外的id_lang变量？
【发布时间】：2022-01-27 16:51:00
【问题描述】：

如何在渲染函数之外访问 let 编号以检查是否

const 导航栏 = () => {

const getID = async (id) => {        
    let id_lang = id;       
    console.log(id_lang);        
}

return (
    <Nav>
       <NavMenu>
       {navname.map((el, index) => (
            <NavItem key={index} >
                <NavLinks to="/">                                   
                    {
                        '1' === {id_lang} ? <p>{el.name_th}</p> : <p>{el.name_en}</p>
                        //get id_lang for check if here.....
                    } 
                </NavLinks>                             
            </NavItem>
        ))}     
            <NavItem >
                <NavLinksLang >                             
                    <DropdownMenu className='dropdownMenu'>
                        {language.map((el) => (
                            <DropdownLink onClick={ () => getID(el.id)} >
                                {el.lang_name}                                  
                            </DropdownLink>                                 
                        ))}  
                    </DropdownMenu>
                </NavLinksLang>                             
            </NavItem>
       </NavMenu>             
                    
    </Nav>
)

}

导出默认导航栏

【问题讨论】：

标签： javascript node.js reactjs styled-components

【解决方案1】：

谢谢，它有效，但在选择语言时如何更新IF检查？

const [idLang, setIdLang] = useState('');
const getID = async (id) => {        
        let id_lang = id;
        setIdLang(id_lang)      
    }

{navtxt.map((el, index) => (
     <NavItem key={index} >
         <NavLinks to="/" >                                
                 {
                         '1' === {idLang} ? <p>{el.name_th}</p> : <p>{el.name_en}</p>
                 } 
          </NavLinks>                             
   </NavItem>
))} 
<DropdownMenu className='dropdownMenu'>
            {language.map((el, index) => (
                      <DropdownLink onClick={ () => getID(el.id)} >
                                  {el.lang_name}                                  
                     </DropdownLink>                                 
           ))}  
 </DropdownMenu>

【讨论】：

【解决方案2】：

变量的范围和可访问性取决于它们被声明的级别。

当您创建组件并在组件的顶层声明变量时，该变量可由以下所有代码访问。但是，在内部函数的范围内声明变量会将范围仅限于该函数

const MyComponent = () => {

  var myVariable = 'hello';

  function myFunction() {
    var myScopedVariable = 'goodbye';
    console.log(myScopedVariable);
    console.log(myVariable);
  }

  console.log(myVariable) //this console logs 'hello'
  console.log(myScopedVariable) //this console logs 'undefined' because it is out of scope

  return <></>
}

根据您的代码，您已在名为 getID 的函数范围内声明了 id_lang 变量。这意味着只有 getID 可以访问和更改此变量。

为了在此函数范围之外访问此变量，您需要在组件级别（即返回之前的任何位置）声明它。然而。考虑到变量是可变的，您更有可能希望将 id_lang 声明为有状态变量。因此，您应该编写 const [idLang, setIdLang] = useState('') 并在 getID 方法中使用 setIdLand(id) 更新 idLang 的值

【讨论】：

It works, but how does it update the if check when the language is selected?
React 使用不可变状态。因此，当您使用 useState 对其进行变异时，这会触发您的前端代码的重新渲染（进而运行可能与演示登录相关的任何功能）。 reactjs.org/docs/state-and-lifecycle.html

【解决方案3】：

可以使用全局，语法是

让 window.id_lang = id;

这将使 id_lang 成为一个全局变量，使您能够在范围之外访问它。

请记住，您每次都必须使用 window.id_lang 才能使用该变量。

【讨论】：