时间戳

首页 > 解决方案 > 如何从函数调用中渲染 React 子组件？

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

问题描述

我试图在我的 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 子组件没有被渲染？

标签： javascriptreactjscomponentsrenderreact-component

解决方案

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

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

演示

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

推荐阅读