首页 > 专栏 > 前端 > 文章详情
React 中 JSX 不能将表达式作为元素类型,要先声明赋值 发布于:2021-03-27 10:13:33   来源:React   查看:4  讨论:0
import React from 'react';cVP易塔云建站-模板下载,web开发资源,技术博客
import { PhotoStory, VideoStory } from './stories';cVP易塔云建站-模板下载,web开发资源,技术博客
const components = {cVP易塔云建站-模板下载,web开发资源,技术博客
  photo: PhotoStory,cVP易塔云建站-模板下载,web开发资源,技术博客
  video: VideoStorycVP易塔云建站-模板下载,web开发资源,技术博客
};cVP易塔云建站-模板下载,web开发资源,技术博客
function Story(props) {cVP易塔云建站-模板下载,web开发资源,技术博客
  // 错误 !JSX 类型不能是一个表达式。cVP易塔云建站-模板下载,web开发资源,技术博客
  return <components[props.storyType] story={props.story} />;cVP易塔云建站-模板下载,web开发资源,技术博客
}
要解决这个问题, 需要首先将类型赋值给一个大写字母开头的变量:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';

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

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

评论

  • 匿名