时间戳

首页 > 解决方案 > 我可以在 JSX 标签中使用模板文字吗？

javascript - 我可以在 JSX 标签中使用模板文字吗？

问题描述

我基本上希望在我正在制作的组件中呈现可变组件，这将根据用户在道具中提供的输入而有所不同，但我想避免不必要的if陈述等。

我能做到吗？例如，如果weatherprop 由用户定义为Sun，则<{weather}/>与 相同<Sun />。

标签： javascriptreactjsjsx

解决方案

在 React 中，以大写字母开头的名称将编译为 createComponent 方法。因此，考虑到这一点，正确的解决方案是将名称值分配给大写变量（见下文）。

const WeatherComponent = props => {
  const ComponentTagName = props.weather;

  return <ComponentTagName />
}

我喜欢使用的另一种技术是在对象中映射子组件。这使得组件更易于配置（和重用），因为只需要缩写键而不是完整的组件名称。

import React from 'react';

import SunComponent from './sun-component';
import RainComponent from './rain-component';


const WeatherComponents = {
     Sun: SunComponent,
     Rain: RainComponent
};

const WeatherComponent = (props) => {
    const TagName = WeatherComponents[props.weather || 'Sun'];
    return <TagName />
}
export default MyComponent;

推荐阅读