import React from 'react';
function Poem(props) {
let poem;
switch (props.title) {
case '静夜思':
poem = (
<>
<h2>静夜思</h2>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</>
);
break;
case '登高':
poem = (
<>
<h2>登高</h2>
<p>风急天高猿啸哀,</p>
<p>渚清沙白鸟飞回。</p>
<p>无边落木萧萧下,</p>
<p>不尽长江滚滚来。</p>
</>
);
break;
// 可以继续添加其他的 case 分支
default:
poem = <p>暂无匹配的古诗</p>;
}
return <div>{poem}</div>;
}
export default Poem;
在页面中,可以通过引用<Poem title='静夜思' />来呈现组件内容。如果不传递到title参数,则默认返回<p>暂无匹配的古诗</p>;