TypeError：无法读取 null 的属性（正在读取“文档”）答案

【问题标题】：TypeError: Cannot read properties of null (reading 'document')TypeError：无法读取 null 的属性（正在读取“文档”）
【发布时间】：2022-01-26 09:04:17
【问题描述】：

我正在尝试从新窗口打开一个新窗口，但出现上述错误。

这是我的 SystemModal.js

const SystemModal = (props) => {
    console.log(props)
    const [visible, setVisible] = useState(false);

    return (
        <Row>
            <Col>
                    <Display tryData = {props.data} type = "systeminformation" />

                    <RepairWindowRegister repairData = {RegisterJson} 
                    type="repairdetails" 
                    buttonName = "Add Repair Item" 
                    textName = "Add Item" 
                    className = "AddItem" 
                    failureInfo = {props.failureInfo} />

                    <FailureWindow className = 'ongoing' 
                    headerName = "Failure Information" 
                    data = {props.failuredata} 
                    failureinformationlength = {props.failureinformationlength} 
                    failuredetailslength = {props.failuredetailslength}  
                    systemdata = {props.data} />


            </Col>
            <br/>
        </Row>
    )
}

export default SystemModal;

该组件已经在一个新窗口中呈现，如下所示：System-Modal-Sample

如图所示，RepairWindowRegister 和 FailureWindow Component 分别对应于 Add Repair Item 按钮和 Open Failure Details 按钮（这两个按钮应该会打开一个新窗口）。现在，当我单击其中任何一个按钮时，它都会返回此错误-

Repair-Window-Register-Error 在这种情况下，我单击了添加修复项目按钮，打开失败详细信息按钮的错误相同。

这是我的 RepairWindowRegister.js：

function RepairWindowRegister(props) {
    console.log(props)
    const [visible, setVisible] = useState(false)
    const [open, setOpen] = useState();

    const RenderInWindow = (windowProps) => {

      const [container, setContainer] = useState(null);
      const newWindow = useRef(window);

      useEffect(() => {
        const div = document.createElement("div");

        setContainer(div);
      }, []);
    
      useEffect(() => {
        if (container) {
          newWindow.current = window.open(
            "",
            "",
            "titlebar=yes,toolbar=no,menubar=no,location=no,width=600,height=430,left=200,top=200"
          );

            newWindow.current.document.title = "Register Repair Progress";

          newWindow.current.document.body.appendChild(container);
          const curWindow = newWindow.current;
          copyStyles(document, newWindow.current.document);
          return () => curWindow.close();


          
        }
      }, [container]);
    
      return container && createPortal(windowProps.children, container);
    };


  return (
    <>  
        <Row>
            <Col>
               <span>{props.textName}</span>
             </Col>
        <Col>
        {(open == true)?
        <Button onClick={() => setOpen(false)} 
        className = "input"> {props.buttonName} </Button>
        :
        <Button onClick={() => setOpen(true)} 
        className = "input"> {props.buttonName} </Button>
        }
            
            {open == true ?
            <RenderInWindow>
                <RegRepair repairData={props.repairData} 
                failureInfo={props.failureInfo} 
                type="repairdetails"/>
            </RenderInWindow>
            :
            null
            }
        </Col>
        </Row>
    </>
  );
}


export default RepairWindowRegister;

这里有错误的解决方法吗？真的可以从新窗口渲染新窗口吗？

【问题讨论】：

您正在尝试访问newWindow.current.document，但newWindow.current 是null。您无法读取null 的属性document。这就是错误消息告诉您的内容。
@jabaa 为什么即使我有 newWindow 的声明它也会返回 null？
window.open: "返回值...如果窗口无法打开，返回值为null。"

标签： javascript html reactjs

【解决方案1】：

可以从新窗口渲染新窗口，但是...

newWindow.current 为 null，因为方法 window.open() 在执行代码时实际上并没有打开任何东西，但为什么呢？添加拦截器。

Opera Add blocker on codesandbox

只要当前浏览器不阻止添加（如您的和我的，可能还有其他所有人），您的代码就可以工作。

解决方法？使用句柄方法自己触发并打开模态，而不是在自身组件安装周期。

【讨论】：