时间戳

首页 > 解决方案 > 反应条件标签名称不起作用 - 所有字母都缩小了

reactjs - 反应条件标签名称不起作用 - 所有字母都缩小了

问题描述

我正在尝试根据道具值有条件地呈现标签名称。例子

   const SimpleTagName = `Ball${size === 'large' ? 'Large' : 'Small'}`;

   return (<SimpleTagName />

但问题是我得到了所有小写字母的“balllarge”标签。我做错了什么？

标签： reactjs

解决方案

试试这个方法：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

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

function Story(props) {
    // Correct! JSX type can be a capitalized variable.
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}

处理此模式的官方文档参考：https ://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

推荐阅读