[英]How to render React Child Components from a function call?
我試圖在我的 App 組件中調用 function, 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 子組件沒有被渲染?
我想你只是忘了從你的 function 回來,
const rows = () => {
//return here
return personsToShow.map(person =>
<PhoneBook key={person.number} name={person.name} number={person.number}/>
);
}
注意:您應該提供唯一key
。 您的密鑰在這里不是唯一的,您可以使用數字(大部分是唯一的)作為密鑰作為key={person.number}
。
省略箭頭 function 中的{}
以返回表達式。
const rows = () =>
personsToShow.map(person =>
<PhoneBook key={personsToShow.length+1} name={person.name} number={person.number}/>
);
不要使用函數,使用變量,因為每次重新渲染都會創建匿名函數
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>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.