React制作带有参数props的组件;根据古诗名字,返回古诗的div内容

33 阅读1分钟
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>;