React Modal组件props异常触发页面空白及对象属性访问问题求助

核心问题1：点击按钮页面空白 #

你在ServiceModal组件中直接将serviceInfo对象作为React子元素渲染，React不支持直接渲染普通对象，会抛出「Objects are not valid as a React child」错误，直接导致应用崩溃白屏。

核心问题2：无法正确访问title和desc属性 #

你没有从传入的serviceInfo对象中读取对应属性，而是直接渲染了整个对象，同时需要做好空值防护避免属性读取报错。 #

修复后的代码 #

修改后的ServiceModal组件 #

const ServiceModal = (props) => {
  return ReactDOM.createPortal(
    <>
      {/* 增加serviceInfo存在性判断，避免空值报错 */}
      {props.show && props.serviceInfo ? (
        <div className={classes.modalContainer} onClick={() => props.close()}>
          <div className={classes.modal} onClick={(e) => e.stopPropagation()}>
            <header className={classes['modal_header']}>
              {/* 读取对象的title属性 */}
              <h2> {props.serviceInfo.title} </h2>
              <hr />
            </header>
            <div className={classes['modal_content']}>
              {/* 读取对象的desc属性 */}
              <main> {props.serviceInfo.desc} </main>
            </div>
            <footer className={classes.Footer}>
              <button
                className={classes['modal-close']}
                onClick={() => props.close()}
              >
                Cancel
              </button>
            </footer>
          </div>
        </div>
      ) : null}
    </>,
    document.getElementById('modal')
  );
};

可选简化写法 #

如果不想加双重判断，也可以用可选链运算符简化属性读取，写法如下：

<h2> {props.serviceInfo?.title} </h2>
<main> {props.serviceInfo?.desc} </main>

内容的提问来源于stack exchange，提问作者LogvnR