我正在尝试在我的 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>
)
}
其中 personsToShow 是一个包含以下内容的数组:
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 子组件没有被渲染?
最佳答案
我想你只是忘了从你的函数中返回,
const rows = () => {
//return here
return personsToShow.map(person =>
<PhoneBook key={person.number} name={person.name} number={person.number}/>
);
}
注意:您应该提供唯一的key
。您的 key 在这里不是唯一的,您可以使用数字(大部分是唯一的)作为 key 作为 key={person.number}
。
关于javascript - 如何从函数调用中渲染 React 子组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58021866/