访问元素React内部的内容

Question

function Lesson1(props) {
return (<div><Lesson name="Name of the lesson"></Lesson></div>)
}

所以Lesson不是Lesson1的孩子，我不知道该怎么称呼它(所以我不能在谷歌上搜索(。在另一个组件中，我尝试渲染[<Lesson1 />, <Lesson2 />]数组。我想用地图从第1课映射到第1课的名称道具。不知道如何访问它。请帮助！

class HomePage extends React.Component {
constructor(props){
super(props);
let lessons = [<Lesson1 key="1" />, <Lesson2 key="2" />];
this.state = {lessons: lessons};
}
render() { 
return (
<div className="homePage">
<div className="lessonList">
{ this.state.lessons // here i want to render Lesson name of Lesson1 and Lesson2 instead of full Lesson1 and Lesson2
}
</div>
</div>
);
}
}

Answer 1

如果在每节课中向提供一个名为name的道具，则可以像访问item.props.name一样访问它。

import React from "react";
const Lesson1 = () => {
return <div>aaa</div>;
};
const Lesson2 = () => {
return <div>bbb</div>;
};
class HomePage extends React.Component {
constructor(props) {
super(props);
let lessons = [<Lesson1 name="Lesson1" />, <Lesson2 name="Lesson2" />];
this.state = { lessons: lessons };
}
render() {
return (
<div className="homePage">
<div className="lessonList">
{
this.state.lessons.map((item) => item.props.name) // here i want to render Lesson name of Lesson1 and Lesson2 instead of full Lesson1 and Lesson2
}
</div>
</div>
);
}
}
export default HomePage;

代码沙盒