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;

selectOption还包含随机选择的字符串。

当我使用{props.selectedOption && <p>{props.selectedOption}</p>}时，它会给出错误＆＃34;对象作为React子对象无效（找到：带有键{option}的对象）。如果您要渲染子集合，请改用数组。＆＃34;。不使用这个我的代码工作正常。请帮我解决这个问题

Answer 1

使用时

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

如果不为null且不为布尔值，则此部分为props.selectedOption。因此将其更改为

{!!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;

React-Modal＆＃34;对象无效作为React孩子＆＃34;？

1 个答案: