我要做的才能声明“ app.js”中的变量。在react.js中，并在“ return（）”中使用此变量。进入应用功能？

Question

最终项目的图像

• 当我单击一个橙色按钮时，将“ P1”变量打印到控制台，但该变量的值为null 我不知道为什么这个变量会给我这个错误，我想在按钮内的onclick函数中使用它。

  从“ ./images/bg-pattern-desktop.svg”中导入img_1; 从“ ./images/illustration-woman-online-desktop.svg”导入img_2; 从“ ./images/illustration-box-desktop.svg”导入img_3;

  函数应用程序（）{ const p1 = document.queryselector（“ p1”）;

   返回（
    ＆lt;＆gt;
      ＆lt; img src = {img_3} alt =“ img_3” className =“ img_3” /＆gt;
  
      ＆lt; div className =“容器”＆gt;
        ＆lt; div className =“ imgbox”＆gt;
          ＆lt; img src = {img_1} alt =“ img_1” className =“ img_1” /＆gt;
          ＆lt; img src = {img_2} alt =“ img_2” className =“ img_2” /＆gt;
        ＆lt;/div＆gt;
  
        ＆lt; div className =“ textbox”＆gt;
          ＆lt; h1＆gt; faq＆lt;/h1＆gt;
          ＆lt; div className =“ wordity”＆gt;
            ＆lt; div＆gt;
              {/ * p1的值为null */}
              {/ *因为它无法获得document.queryselector（“。p1”） */}
              ＆lt;按钮
                onClick = {（）=＆gt; {
                  console.log（p1）;
                }}}
              ＆gt;
                我可以邀请多少个团队成员？
              ＆lt;/butt＆gt;
              ＆lt; p className =“ p1”＆gt;
                lorem ipsum dolor sit amet consectur，掺杂的Elit。
                Quaibus obcaecati，Quae，Corporis。
              ＆lt;/p＆gt;
            ＆lt;/div＆gt;
  
            ＆lt; hr /＆gt;
  
            ＆lt; div＆gt;
              ＆lt; button onClick = {（）=＆gt; {}}＆gt;
                我可以邀请多少个团队成员？
              ＆lt;/butt＆gt;
              ＆lt; p className =“ notactive p2”＆gt;
                lorem ipsum dolor sit amet consectur，掺杂的Elit。
                Quaribus obcaecati，Quae，Corporis。
              ＆lt;/p＆gt;
            ＆lt;/div＆gt;
  
            ＆lt; hr /＆gt;
  
            ＆lt; div＆gt;
              ＆lt; button onClick = {（）=＆gt; {}}＆gt;
                我可以邀请多少个团队成员？
              ＆lt;/butt＆gt;
              ＆lt; p className =“ notactive p3”＆gt;
                lorem ipsum dolor sit amet consectur，掺杂的Elit。
                Quaibus obcaecati，Quae，Corporis。
              ＆lt;/p＆gt;
            ＆lt;/div＆gt;
  
            ＆lt; hr /＆gt;
  
            ＆lt; div＆gt;
              ＆lt; button onClick = {（）=＆gt; {}}＆gt;
                我可以邀请多少个团队成员？
              ＆lt;/butt＆gt;
              ＆lt; p className =“ notactive p4”＆gt;
                lorem ipsum dolor sit amet consectur，掺杂的Elit。
                Quaribus obcaecati，Quae，Corporis。
              ＆lt;/p＆gt;
            ＆lt;/div＆gt;
  
            ＆lt; hr /＆gt;
  
            ＆lt; div＆gt;
              ＆lt; button onClick = {（）=＆gt; {}}＆gt;
                我可以邀请多少个团队成员？
              ＆lt;/butt＆gt;
              ＆lt; p className =“ notactive p5”＆gt;
                lorem ipsum dolor sit amet consectur，掺杂的Elit。
                Quaibus obcaecati，Quae，Corporis。
              ＆lt;/p＆gt;
            ＆lt;/div＆gt;
  
            ＆lt; hr /＆gt;
          ＆lt;/div＆gt;
        ＆lt;/div＆gt;
      ＆lt;/div＆gt;
    ＆lt;/＆gt;
  ）；
   

  }

  导出默认应用程序;

Answer 1

这里没有错误，只是我认为您认为您的误解。您的问题是尝试在React组件中使用document.queryselector。

简单答案：
如下所示，请使用useref。另外，请查看 docs 以更好地理解。

完整答案：
当组件首先渲染时，document.queryselector在使用类“ p1”元素返回元素之前运行。因此，它尚未在页面上重新重新进行过重新进行。那里的document.queryselector将无法找到该元素，而是返回null。

function App() {
  const p1 = React.useRef(null);
  
  return (
    <React.Fragment>
      <img src="" alt="img_3" className="img_3" />
      
      <div className="container">
         <div className="imgBox">
          <img src="" alt="img_1" className="img_1" />
          <img src="" alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              {/* the value of p1 is null */}
              {/* because it can't get document.querySelector(".p1") above */}
              <button
                onClick={() => {
                  console.log(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p2">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p3">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p5">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js" integrity="sha512-bom/WJB/C/RVkBpU7ic7qopGc/CSWjj1aZhZLykucHKCZuT9h881Uh8VdvEioA6L0vQ/Tsaw1uK2Pnj312c17g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js" integrity="sha512-HBhuJNLkfYh0Z++tgfKYCstQZzgQmMbAfK4FvzxHrUYqfI+FRnXeBn1ZXu+1NSGWissxE2ipI+eKaoRbRV2W4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="root"></div>

Answer 2

用QuerySelector字符串来定位类需要一个点：

function App() { const p1 = document.querySelector("p1");
// should be:
function App() { const p1 = document.querySelector(".p1");

如果要将变量存储在React组件中，我建议您查看 usestate（）而不是查询选择器：

import { useState } from "react";
function App() {
    const [fillerText, setFillerText] = useState(
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis."
    );

    return (
        // other stuffs
        <div>
            <button onClick={() => console.log(fillerText)}>
                How many team members can I invite?
            </button>
            <p className="p1">{fillerText}</p>
        </div>
        // other stuffs
    );
}