反应函数参数 - 失败的道具类型：预期的“布尔值”

Question

我正在尝试调用我在另一个 class 中制作的模态框。我只是想传递一个布尔参数来打开或关闭它。

调用模态：

<CourseModal show={true} />

模态函数：

export default function CourseModal(show) {
  return (
    <Modal open={show}>
        <ModalContent />
    </Modal>
  );
}

但是，当我这样做时，出现以下错误：

为什么会这样？它说它需要一个布尔值，但它显然是？提前致谢！

Answer 1

目前，您传递了 props 对象本身，您只是将其命名为 show。

export default function CourseModal({ show }) {
  return (
    <Modal open={show}>
      ...
    </Modal>
  );
}

// You called it show instead of props
export default function CourseModal(props) {
  return (
    <Modal open={props.show}>
      ...
    </Modal>
  );
}

import PropTypes from 'prop-types';
const CourseModal = ({ show }) => {
  return (
    <Modal open={show}>
      ...
    </Modal>
  );
};

CourseModal.propTypes = {
  show: PropTypes.bool;
}

export default CourseModal;

此外，在 JSX 中你不必传递 true 布尔值，你可以这样写：

// Same as show={true}
<CourseModal show />

反应函数参数 - 失败的道具类型：预期的“布尔值”

React function parameters - Failed prop type: expected `boolean`

reactjs

function

types

parameters

prop