如何从函数调用中渲染 React 子组件？

Posted 2023-02-23

【中文标题】如何从函数调用中渲染 React 子组件？

【英文标题】：How to render React Child Components from a function call?

【发布时间】：2020-01-21 03:05:24

【问题描述】：

我试图在我的 App 组件中调用一个函数 rows()，它将呈现 PhoneBook 子组件：

import React from 'react';
import PhoneBook from './components/PhoneBook';

const App = () => 
  const rows = () => 
    personsToShow.map(person => 
      <PhoneBook key=personsToShow.length+1 name=person.name number=person.number/>
    );
  

  return (     
    <div>
      rows()
    </div>
  )

personToShow 是一个数组，包含：

0: name: "Arto Hellas", number: "000-000-0000"
1: name: "Ada Lovelace", number: "39-44-5323523"
2: name: "Dan Abramov", number: "12-43-234345"
3: name: "Mary Poppendieck", number: "39-23-6423122"

PhoneBook 子组件定义为：

import React from 'react';

const PhoneBook = (name, number) => 
    return (
        <div>name number</div>
    );


export default PhoneBook;

PhoneBook 子组件为什么没有被渲染？

【问题讨论】：

您好，请阅读this，然后尝试关闭问题。

【参考方案1】：

不要使用函数，使用变量，因为每次重新渲染都会创建匿名函数

import React from 'react';
import PhoneBook from './components/PhoneBook';

const App = () => 
  const rows = personsToShow.map((person, index) => // removeed function
     <PhoneBook key=index name=person.name number=person.number/>
     //__________^ use proper key
  );


  return (     
    <div>
      rows // removed function call
    </div>
  )

【参考方案2】：

我想你只是忘了从你的函数中返回，

const rows = () => 
  //return here
  return personsToShow.map(person => 
    <PhoneBook key=person.number name=person.name number=person.number/>
  );
  

Demo

注意：您应该提供唯一的key。您的密钥在这里不是唯一的，您可以使用数字（大部分是唯一的）作为您的密钥 key=person.number。

【讨论】：

我没有意识到如果函数渲染子组件，我必须从函数返回，这些子组件有自己的返回。

【参考方案3】：

在箭头函数中省略以返回表达式。

  const rows = () =>
    personsToShow.map(person => 
      <PhoneBook key=personsToShow.length+1 name=person.name number=person.number/>
    );