reactjs - React-Modal“对象作为 React 子项无效”？

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>}它时，会出现错误“对象作为 React 子级无效（找到：带有键 {option} 的对象）。如果您打算渲染子级集合，请改用数组。”。不使用这个我的代码工作正常。请帮我解决这个问题

Answer 1

当你使用

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

这部分 reterned 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;