如何在不"JSX expressions must have one parent element. error"的情况下向我的添加模态组件添加另一个模态

Question

我想为我的添加模态定义另一个模态，但我得到JSX表达式必须有一个父元素。

export default class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    showAddModal = () => {
        this.refs.myModal.open();
    }
    render() {
        return( 
            <Modal ref={"myModal"}
                   style={{ ...
             </Modal>  
              // till this part everything is ok
             <Modal ref={"anotherModal"}> // I want to this but I can't

Answer 1

正如错误所述，render() 方法中必须只有一个父元素。

只需将所有内容包装在View组件下，这样您的render()方法将如下所示：

    render() {
        return (
          <View>
            <Modal ref={"myModal"}>
            </Modal>  
            <Modal ref={"anotherModal"}>
            </Modal>
          </View>
        );
      }

Answer 2

使用 React.Fragmenthttps://reactjs.org/docs/fragments.html

像这样的东西(简短的语法示例(

<>
 <Modal ref={"myModal"}></Modal>
 <Modal ref={"anotherModal"}></Modal>
</>