反应模态"Objects are not valid as a React child"？

Question

看看下面的代码。

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props)=>(
    <Modal
    isOpen={!!props.selectedOption}
    contentLabel="Selected Option"
    >
    <h1>Selected Option</h1>
    {props.selectedOption && <p>{props.selectedOption}</p>}
  </Modal>
);


export default OptionModal;

同时 selectedOption 包含随机选择的字符串。

当我使用 {props.selectedOption && <p>{props.selectedOption}</p>} 时出现错误 "Objects are not valid as a React child (found: object with keys {option}). If you meant to render a collection of children, use an array instead."。不使用这个我的代码工作正常。请帮我解决这个问题

Answer 1

当您使用

{props.selectedOption && <p>{props.selectedOption}</p>}

这部分返回 props.selectedOption 如果它不是 null 也不是布尔值。所以改为

{!!props.selectedOption && <p>{props.selectedOption}</p>}

将其转换为布尔值。

完整代码：

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props)=>(
    <Modal
    isOpen={!!props.selectedOption}
    contentLabel="Selected Option"
    >
    <h1>Selected Option</h1>
    {!!props.selectedOption && <p>{props.selectedOption}</p>}
  </Modal>
);


export default OptionModal;

反应模态"Objects are not valid as a React child"？

React-Modal "Objects are not valid as a React child"?

reactjs

react-modal