React Native中如何在同一函数组件内返回两个并列组件

React/React Native 的JSX语法强制要求组件return只能返回单个根节点，直接并列写两个同级组件、用逗号分隔组件的写法均不符合语法规范，会触发语法报错或组件覆盖异常。

共两种常规实现方式，可根据业务场景选择：

• 方案1（推荐）：用React.Fragment包裹同级组件。该组件为React提供的空容器，渲染时不会生成额外的原生视图节点，不会增加冗余布局层级，支持简写为<></>空标签。
• 方案2：用额外的父级View组件包裹所有同级内容。适合需要给整块内容加统一布局样式的场景，缺点是会多渲染一层原生视图节点。

原代码除了多根节点的语法错误外，还存在两个会导致运行异常的问题，已一并修复：

1. SaveMessage组件定义的入参为FirstMassege，原调用时传入的是title属性，参数名不匹配会导致文本无法正常渲染
2. statecolor变量未加声明关键字，会泄漏为全局变量引发渲染异常

import React, { useState, Fragment } from "react";
import { Text, View } from "react-native";

const SaveMessage = ({ FirstMassege }) =>{
  return(
     <Text>{FirstMassege}</Text>
  ) 
}

export const StateContext = React.createContext(null);

const concatMessage = ({ children }) =>{
  const [colorless, Setaddcolor] = useState([])
  // 补全变量声明
  const statecolor = {
     color : [colorless, Setaddcolor]
  }

  return (
    // 用Fragment作为唯一根节点包裹两个同级组件，可替换为<>简写
    <Fragment>
      <View>
         {/* 传参名和组件定义的入参保持一致 */}
         <SaveMessage FirstMassege='primera parte del mensaje'/>
      </View>
      <StateContext.Provider value={statecolor}>{children}</StateContext.Provider>
    </Fragment>
  );
}

如果选择空标签简写方案，不需要单独导入Fragment，直接将<Fragment>替换为<>、</Fragment>替换为</>即可。

内容的提问来源于stack exchange，提问作者Toms_Hd3z