React中CModal组件visible属性非布尔值警告问题求助

警告内容 #

警告：为非布尔属性visible传入了false值。
如果要将其写入DOM，请传入字符串形式：visible="false" 或 visible={value.toString()}。
如果您之前通过visible={condition && value}来条件性省略该属性，请改用visible={condition ? value : undefined}。

问题分析 #

代码中<CModal visible={visible} onClose={() => setVisible(false)} />这一行触发了警告。原因是CModal组件的visible属性并非DOM原生布尔属性，当传入布尔值false时，React会尝试将该属性渲染到DOM元素上，但DOM不支持非字符串的false作为属性值，因此抛出警告。

解决方法 #

按照警告提示，当需要隐藏模态框时，应传入undefined让React省略该属性，而非传入false。修改visible属性的赋值逻辑即可：

将原代码中的：

<CModal visible={visible} onClose={() => setVisible(false)}> 

改为以下两种写法之一：

写法1（清晰版）：

<CModal visible={visible ? true : undefined} onClose={() => setVisible(false)}> 

写法2（简洁版）：

<CModal visible={visible || undefined} onClose={() => setVisible(false)}> 

修改后的完整代码 #

import React,{useState} from 'react'
import {
  CAvatar,
  CBadge,
  CDropdown,
  CImg,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CModalTitle,
  CModalHeader,
  CModalFooter,
  CButton,
  CModal,
  CModalBody
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { useHistory } from 'react-router-dom'

const TheHeaderDropdown = () => {
  const history = useHistory();
  const [visible, setVisible] = useState(false)
  const logOut = (e) => {
    localStorage.removeItem("hrms_auth");
    history.push("/login")
  }

  return (
    <CDropdown
      inNav
      className="c-header-nav-items mx-2"
      direction="down"
    >
      <CDropdownToggle className="c-header-nav-link" caret={false}>
        <div className="c-avatar">
          <CImg
            src={'avatars/6.jpg'}
            className="c-avatar-img"
            alt="admin@bootstrapmaster.com"
          />
        </div>
      </CDropdownToggle>
      <CDropdownMenu className="pt-0" placement="bottom-end">
        <CDropdownItem
          header
          tag="div"
          color="light"
          className="text-center"
        >
          <strong>Account</strong>
        </CDropdownItem>
        <CDropdownItem>
          <CIcon name="cil-bell" className="mfe-2" />
          Updates
          <CBadge color="info" className="mfs-auto">42</CBadge>
        </CDropdownItem>
        <CDropdownItem
          header
          tag="div"
          color="light"
          className="text-center"
        >
          <strong>Settings</strong>
        </CDropdownItem>
        <CDropdownItem>
          <CIcon name="cil-user" className="mfe-2" />Profile
        </CDropdownItem>
        <CDropdownItem divider />

        <CDropdownItem onClick={() => setVisible(!visible)}><CIcon name="cil-lock-locked" className="mfe-2" />Logout</CDropdownItem>

        {/* 修改了visible属性的赋值逻辑 */}
        <CModal visible={visible ? true : undefined} onClose={() => setVisible(false)}> 
          <CModalHeader onClose={() => setVisible(false)}>
            <CModalTitle>Logout</CModalTitle>
          </CModalHeader>
          <CModalBody>Are You Sure You Want To Continue ?</CModalBody>
          <CModalFooter>
            <CButton color="secondary" onClick={() => setVisible(false)}>
              Close
            </CButton>
            <CButton color="primary" onClick={logOut}>Continue</CButton>
          </CModalFooter>
        </CModal> 
      </CDropdownMenu>
    </CDropdown>
  )
}

export default TheHeaderDropdown

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