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 cant

Answer 1

由于错误状态，您在render()方法内必须只有一个父元素。

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

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

Answer 2

使用<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:tools="http://schemas.android.com/tools" android:background="#000000" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@color/icon_background" android:orientation="vertical" android:paddingTop="16dp" > <TextView android:id="@+id/title_content_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginHorizontal="16dp" tools:text="" android:textColor="@color/colorPrimaryDark" android:textSize="28sp" android:textStyle="bold" /> <TextView android:id="@+id/title_content_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginHorizontal="16dp" android:layout_marginTop="16dp" android:ellipsize="end" android:text="" android:textSize="15sp" /> </LinearLayout> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <android.support.v7.widget.AppCompatImageView android:id="@+id/title_content_thumbnail" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="centerCrop" /> <View android:layout_width="100dp" android:layout_height="match_parent" android:layout_gravity="left|start" android:background="@drawable/transparent_bg" /> <View android:layout_width="match_parent" android:layout_height="100dp" android:layout_gravity="bottom" android:background="@drawable/transparent_bg_bottom" /> </FrameLayout> </LinearLayout> https://reactjs.org/docs/fragments.html

类似这样的内容（简短的语法示例）

React.Fragment

如何在不获取“ JSX表达式必须具有一个父元素的情况下，向我的添加模式组件中添加另一个模式。错误”

2 个答案: