React 片段中的文本

Posted 2023-02-22

【中文标题】React 片段中的文本

【英文标题】：Text in a React Fragment

【发布时间】：2021-12-22 02:41:12

【问题描述】：

render() 
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );

与这种情况不同，我有一个完整的片段列表，我必须根据 for 循环中的某些情况返回这些片段以进行条件渲染。但为此，我必须在 中编写某些字符串文本。 我尝试了很多方法，但我无法这样做。 我的循环在这里：

for (let i = 0; i < CONTENTS.length; i++) 
            if (CONTENTS[i].name === props.displaySubPlayArea) 
                const name = CONTENTS[i].name;
                return <name />
            
;

它返回<name></name> 标签而不是名称包含的文本。 提前致谢

已编辑：例如

function apple() 
   return (//stuff1)


function banana() 
   return (//stuff2)


function pear() 
   return (//stuff3)

fruits = ['apple', 'banana', 'pear']
fruits.map((fruit) => 
     return <fruit />
)

所以输出不能是：

<apple></apple>
<banana></banana>
<pear></pear>

输出必须是苹果、香蕉和梨功能组件中的内容

//stuff1
//stuff2
//stuff3

东西可以是任意数量的数据

【问题讨论】：

可以分享完整的组件代码吗？

看看我分享了一个例子

【参考方案1】：

当元素类型以小写字母开头时，它指代内置组件，如 or 并导致传递给 React.createElement 的字符串 'div' 或 'span'。以大写字母开头的类型，如编译为 React.createElement(Foo) 并对应于 javascript 文件中定义或导入的组件。更多信息请阅读this。

function Apple() 
  return <p>apple</p>;


function Banana() 
  return <p>banana</p>;


function Pear() 
  return <p>pear</p>;


function App() 
  const fruits = [Apple, Banana, Pear];
  const result = fruits.map((Fruit, index) => 
    return <Fruit key=index />;
  );
  return <>result</>;

【参考方案2】：

想想你所追求的是：

fruits.map((fruit, index) => (
    <React.Fragment key=index>
         fruit 
    </React.Fragment>

【讨论】：

不，只检查我刚刚编辑的示例

【参考方案3】：

但为此我必须在

中写入某些字符串文本

我猜你想写：

// Not <name />
return <>name</>

// Same
return <React.Fragment>name</React.Fragment>

【讨论】：

不，我不是那个意思。

查看我刚刚发布的示例