import React from "react";const infoMap = { functionComInfo: 'Function Component Info', ComInfo: 'Class Component Info', titleInfo: '函数组件和类组件的简单示例', functionCompOutput: '函数组件的示例：function compName() {\n' + ' return <h3>Function Component</h3>;\n' + '}结果为', CompOutput: '类组件的示例：class FullReactComponent extends React.Component {\n' + ' render() {\n' + ' return <h3>Class Component</h3>;\n' + ' }\n' + '}结果为'}// 定义函数组件，组件名大写function FunctionReactComp(){ return <h3>{infoMap.functionComInfo}</h3>;}// 定义类组件class ClassReactComp extends React.Component{ render(){ return <h3>{infoMap.classComInfo}</h3>; }}// 声明变量const functionComp = <FunctionReactComp/>;constComp = <ClassReactComp/>;// 要渲染的内容const ComponentExample = () => { return( <span> <h2>{infoMap.titleInfo}</h2> <hr/> <h3>{infoMap.functionCompOutput}</h3> {functionComp} <hr/> <h3>{infoMap.classCompOutput}</h3> {classComp} </span> ); };export default ComponentExample;

运行效果：