我可以在 JSX 標簽中使用模板文字嗎？

Question

我基本上希望在我正在制作的組件中呈現可變組件，這將根據用戶在道具中提供的輸入而有所不同，但我想避免不必要的if語句等。

我能做到嗎？ 例如，如果weather屬性由用戶定義為Sun ，那么<{weather}/>將與<Sun />相同。

Answer 1

在 React 中，以大寫字母開頭的名稱將編譯為 createComponent 方法。 因此，考慮到這一點，正確的解決方案是將名稱值分配給大寫變量（見下文）。

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

  return <ComponentTagName />
}

我喜歡使用的另一種技術是在 object 中映射子組件。 這使得組件更易於配置（和重用），因為只需要縮寫鍵而不是完整的組件名稱。

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;

Answer 2

您不能真正將 JSX 語法與模板文字混合（盡管在 JSX 中的任何地方您都可以放置{a js expession}您可以使用模板文字，但您不能將表達式放在需要組件名稱的位置）。

但是由於Sun只是一個變量，其值是一個組件，如果你要調用你的屬性Weather而不是weather ，你可以： <Weather />

Answer 3

如果weather包含對Sun function 的引用，則可以直接使用weather （不是通過模板文字），但在小寫字母中，JSX 將假定它是 HTML 標記，而不是組件，並將其放在生成的React.creatElement中的引號中稱呼; 因此您必須使用初始上限變量（ Weather而不是weather ）：

<Weather />

如果weather包含字符串"Sun" ，則不能直接使用它來創建Sun元素； 您需要參考Sun function，而不是字符串。 您需要一種從字符串到 function 的方法（一個 object 來查找它，一個Map等）。

---

您可以在 JSX 的其他地方使用模板文字，在{}中，因為它們包含 JavaScript 表達式。 但不要為標簽定義組件。