Reactjs 在React中使用getElementByID

我在我的getElementById（'password'）上得到了一个“无法读取null属性'style'”，但它在页面上有明确的定义。我是个新手，我猜这是不允许的。但我试图让密码页面显示，直到它的样式更改为“无”，这发生在另一个组件中

function App() {
  const [loggedIn, setLoggedIn] = useState(false)

  if (document.getElementById('password').style.display = "block"){
    setLoggedIn(false)
  } else {
    setLoggedIn(true)
  }

  return (
    <div className="app">
      { //Check if message failed
        (loggedIn)
          ? <div> <Password /> </div> 
          : <div> 
              <Nav />
              <div id="allFiles">
                <FileEarth title="Earth Update"/>
                <FileMars title="Mars Rover Update"/>
                <HardDrvie title="ASTRO Entertainment"/>
                <Folder title="Moon Pics"/>
              </div>
            </div> 
      } 
    </div>
  );
}

export default App;

函数应用程序（）{
const[loggedIn，setLoggedIn]=useState（false）
if（document.getElementById（'password'）.style.display=“block”）{
setLoggedIn（假）
}否则{
setLoggedIn（真）
}
返回(
{//检查消息是否失败
（洛格丁）
?    
:  
} 
);
}
导出默认应用程序；

根据页面上的定义，您似乎只有与“密码”相关的组件。由于您使用的是

getElementById（）

，因此您需要能够像

一样定义元素的id，并将道具传递到组件中，然后组件将分配id

---

另外，请注意，您使用的是HardDrvie，而不是页面上定义的硬盘驱动器，似乎您只有与“密码”相关的组件。由于您使用的是

getElementById（）

，因此您需要能够像

一样定义元素的id，并将道具传递到组件中，然后组件将分配id

---

另外，请注意，您使用的是硬盘而不是硬盘驱动器，以下几点可以帮助您：

最好使用它来访问React中的DOM元素

呈现组件时，React会在其虚拟DOM中创建应用程序的表示形式，然后将其与实际DOM进行区分，以便将代价高昂的DOM更新降至最低。这意味着在您尝试使用“getElementById（）”时，该元素尚未添加到DOM中

您使用的是一个函数组件，它将导致每次重新呈现该组件时都会运行内联逻辑。为避免重新运行此逻辑（该逻辑只应运行一次），应将其包装为

useffect

或不太常见的

useLayoutEffect

（有关详细信息，请参阅）

从我所看到的情况来看，回调函数应该能够执行您想要的操作：

// The password component gets passed the callback function as a prop.
// In this case the callback function would be onLogin.
// When clicking the div the callback function that was provided by
// the parent will be called and the state on the parent will be 
// updated.
const Password = ({ onLogin }) => {
    return (
        <div
            onClick={onLogin}
        >
            Login
        </div>
    );
}

// Parent component.
const Parent = () => {
    // Create state to store if the user is logged in or not.
    const [loggedIn, setLoggedIn] = React.useState(false);

    // Create callback function to pass to the Password component.
    // useCallback ensures that the function is only recreated when
    // a variable in the dependency array is updated.
    // The dependency array uses a reference compare to check for changes.
    const onLogin = React.useCallback(() => {
        setLoggedIn(true);
    }, [setLoggedIn] /* Dependency Array - recreate on setLoggedIn change */ );


    return (
        <>
            <div>
                {/* Write out loggedIn value for debugging. */}
                { loggedIn ? "Logged In" : "Not Logged In" }
            </div>
            {/* Conditionally render password component passing onLogin */}
            { !loggedIn && <Password onLogin={onLogin} /> }
        </>
    )
}

//密码组件作为道具传递回调函数。
//在这种情况下，回调函数将是onLogin。
//单击div时，将调用由提供的回调函数
//将调用父级，父级上的状态将为
//更新。
常量密码=（{onLogin}）=>{
返回(
登录
);
}
//父组件。
常量父项=（）=>{
//如果用户登录或未登录，则创建要存储的状态。
const[loggedIn，setLoggedIn]=React.useState（false）；
//创建要传递给密码组件的回调函数。
//useCallback确保只有在
//将更新依赖项数组中的变量。
//依赖项数组使用引用比较来检查更改。
const onLogin=React.useCallback（（）=>{
setLoggedIn（真）；
}，[setLoggedIn]/*依赖项数组-在setLoggedIn更改时重新创建*/）；
返回(
{/*写出用于调试的loggedIn值。*/}
{loggedIn？“已登录”：“未登录”}
{/*有条件地呈现密码组件传递onLogin*/}
{！loggedIn&&}
)
}

以下几点可以帮助您：

最好使用它来访问React中的DOM元素

呈现组件时，React会在其虚拟DOM中创建应用程序的表示形式，然后将其与实际DOM进行区分，以便将代价高昂的DOM更新降至最低。这意味着在您尝试使用“getElementById（）”时，该元素尚未添加到DOM中

您使用的是一个函数组件，它将导致每次重新呈现该组件时都会运行内联逻辑。为避免重新运行此逻辑（该逻辑只应运行一次），应将其包装为

useffect

或不太常见的

useLayoutEffect

（有关详细信息，请参阅）

从我所看到的情况来看，回调函数应该能够执行您想要的操作：

// The password component gets passed the callback function as a prop.
// In this case the callback function would be onLogin.
// When clicking the div the callback function that was provided by
// the parent will be called and the state on the parent will be 
// updated.
const Password = ({ onLogin }) => {
    return (
        <div
            onClick={onLogin}
        >
            Login
        </div>
    );
}

// Parent component.
const Parent = () => {
    // Create state to store if the user is logged in or not.
    const [loggedIn, setLoggedIn] = React.useState(false);

    // Create callback function to pass to the Password component.
    // useCallback ensures that the function is only recreated when
    // a variable in the dependency array is updated.
    // The dependency array uses a reference compare to check for changes.
    const onLogin = React.useCallback(() => {
        setLoggedIn(true);
    }, [setLoggedIn] /* Dependency Array - recreate on setLoggedIn change */ );


    return (
        <>
            <div>
                {/* Write out loggedIn value for debugging. */}
                { loggedIn ? "Logged In" : "Not Logged In" }
            </div>
            {/* Conditionally render password component passing onLogin */}
            { !loggedIn && <Password onLogin={onLogin} /> }
        </>
    )
}

//密码组件作为道具传递回调函数。
//在这种情况下，回调函数将是onLogin。
//单击div时，将调用由提供的回调函数
//将调用父级，父级上的状态将为
//更新。
常量密码=（{onLogin}）=>{
返回(
登录
);
}
//父组件。
常量父项=（）=>{
//如果用户登录或未登录，则创建要存储的状态。
const[loggedIn，setLoggedIn]=React.useState（false）；
//创建要传递给密码组件的回调函数。
//useCallback确保只有在
//将更新依赖项数组中的变量。
//依赖项数组使用引用比较来检查更改。
const onLogin=React.useCallback（（）=>{
setLoggedIn（真）；
}，[setLoggedIn]/*依赖项数组-在setLoggedIn更改时重新创建*/）；
返回(
{/*写出用于调试的loggedIn值。*/}
{loggedIn？“已登录”：“未登录”}
{/*有条件地呈现密码组件传递onLogin*/}
{！loggedIn&&}
)
}

不错！虽然我不认为useCallback在这里是100%必要的，但实际上可能会通过添加它而降低性能。相反，只使用

const handleLogin可能会更简单、更高效=