React Hook useRef return 样式属性为 null

Question

我正在开发一个模态，我必须在其中访问 HTML 元素的 ID 属性以更改其显示属性。我已经使用 useRef Hook 来实现它，但出现以下错误。

TypeError: Cannot read property 'style' of null

Modal.js:- 代码是 1000 行所以我只分享我用过的部分

    const [isAddProjectClicked, setisAddProjectClicked] = useState(true);
const [isAddProjectClicked, setisAddProjectClicked] = useState(true);
const addProjectModal = useRef(null);

const closeAddProjectModal = () => {
 addProjectModal.current.style.display = 'block';
};

const renderAddProject = () => {
        return (
            <div>
                <div className="task-accordion" ref={addProjectModal} style={{ display: 'none' }}>
                    <i
                        className="fa fa-close close-icon"
                        id="closeIconn"
                        onClick={() => closeAddProjectModal()}
                        aria-hidden="true"
                    ></i>

                    <h4>ADD Project</h4>
                    <div className="form-group">
                        <textarea
                            id="textAreaAddProject"
                            type="text"
                            style={{ height: '30vh' }}
                            placeholder="Project Title"
                            name="Title"
                            className="form-control"
                            onChange={(e) => {
                                setprojectTitle(e.target.value);
                            }}
                            required
                        />
                    </div>
                    <div className="col-sm-12 add-mupps-button">
                        <button type="submit" onClick={() => postProjectApiCall()}>
                            Save
                        </button>
                    </div>
                </div>
            </div>
        );
    };


<div className="col-sm-8 last-div padding-0">
                
    {isAddProjectClicked && renderAddProject()}
                
</div>

Answer 1

如果组件未挂载，则 ref 为空，因此您应该为其添加条件

const closeAddProjectModal = () => {
   if(addProjectModal.current) {
       addProjectModal.current.style.display = 'block';
   }
};

或者只使用可选链接

const closeAddProjectModal = () => {
    addProjectModal.current?.style.display = 'block';
};

Answer 2

您可以通过创建这样的状态来更改模型的可见性。

import { useState } from "react";

function App() {
  const [isAddProjectClicked, setisAddProjectClicked] = useState(true);
  const [addProjectModal, openAddProjectModal] = useState("none"); // creating the state

  const renderAddProject = () => {
    return (
      <div>
        <div className="task-accordion" style={{ display: addProjectModal }}> {/* Set that as display's property value */}
          <i
            className="fa fa-close close-icon"
            id="closeIconn"
            onClick={() => openAddProjectModal("block")}
            aria-hidden="true"
          ></i>

          <h4>ADD Project</h4>
          <div className="form-group">
            <textarea
              id="textAreaAddProject"
              type="text"
              style={{ height: "30vh" }}
              placeholder="Project Title"
              name="Title"
              className="form-control"
              required
            />
          </div>
          <div className="col-sm-12 add-mupps-button">
            <button type="submit">Save</button>
          </div>
        </div>
      </div>
    );
  };

  return (
    <>
      {isAddProjectClicked && renderAddProject()}
      <button onClick={() => openAddProjectModal("block")}>Click Me</button>
      {/* Change the state using any event you want */}
    </>
  );
}

export default App;

如果您需要进一步的支持，请告诉我。

Answer 3

使用react设置样式：

function AddProjectModal(props) {
    const [visible, setVisible] = useState(visible);

    return <div style={{display: visible?'block':'none'}}>
        <button onClick={()=>setVisible(false)}>
        Close
        </button>
    </div>
}

无需 ref 更改样式或 class

React Hook useRef return 样式属性为 null

React Hook useRef return style property as null

javascript

reactjs

react-hooks

use-ref

React Hook useRef return 样式 属性 为 null

React Hook useRef return style property as null

javascript

reactjs

react-hooks

use-ref

React Hook useRef return 样式属性为 null