React官方文档：运行时选择组件类型

最新推荐文章于 2024-04-13 09:44:48 发布

amadeus_liu2

最新推荐文章于 2024-04-13 09:44:48 发布

阅读量85

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/128393132

版权

React 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本文介绍了如何使用React构建可定制的PhotoStory和VideoStory组件，展示如何根据props动态渲染图片或视频。通过components对象和Story组件，实现不同类型的story内容切换。

摘要由CSDN通过智能技术生成

function PhotoStory(props){
  return <div>photo story {props.story}</div>
}

function VideoStory(props){
  return <div>video  story  {props.story}</div>
}

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正确！JSX 类型可以是大写字母开头的变量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}




 root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Story storyType="photo" story="hello,world" />
    </BrowserRouter>
  </React.StrictMode>
);