動態更改React組件標籤

我正在爲一個項目創建一個Landing頁面，並希望通過輔助函數來顯示我的四種不同紙張組件來減少我的代碼。除了在論文中顯示我的Icon組件外，一切似乎都正常工作。動態更改React組件標籤

當我安慰日誌Icon這是正確的文本，但該組件不會出現在網頁上，我收到這兩個警告，每個組件標籤：

"Warning: The tag <CardTravelIcon> is unrecognized in this browser. If you 
meant to render a React component, start its name with an uppercase letter."

和

"Warning: <CardTravelIcon /> is using uppercase HTML. Always use lowercase 
HTML tags in React."

如果我只是在CardTravelIcon或其他3種組件名稱中使用該確切格式進行硬編碼，而不是使用我的地圖功能中的Icon，則一切都按預期工作。以下是我的幫手功能的代碼：

class Landing extends Component { 
    renderPapers() { 
    const classes = this.props.classes; 
    return _.map(infoPapers, ({ description, Icon }) => { 
     return (
     <Grid item xs={6} sm={3} key={Icon}> 
      <Paper className={classes.paper}> 
      <Icon className={classes.paperIcons} /> 
      {description} 
      </Paper> 
     </Grid> 
    ); 
    }); 
    }

我很茫然，很感激任何幫助。謝謝。

來源

2017-10-11 Alex S

請問您可以發佈this.props.classes的輸出嗎？ –

我爲我的網站設計使用材質用戶界面，他們使用this.props.classes作爲定製樣式的方式 –

所以你想傳遞一個組件作爲一個變量，對不對？

比方說，你有這個最小CardTravelIcon組件：

const CardTravelIcon = (props) => (
    <div className={ props.className }>Card Travel Icon</div> 
);

而且infoPapers數據是這樣的（Icon是參考分量）：

const infoPapers = [ 
{ 
    description: "Paper 1 description", 
    Icon : CardTravelIcon 
}];

你沒向我們展示infoPapers數據，但我懷疑你試圖傳遞一個字符串作爲組件，例如{ Icon : "<CardTravelIcon />" }並期望它像設置innerHTML（從字符串呈現HTML）那樣工作。在React中情況並非如此，需要首先將JSX代碼轉換爲調用React.CreateElement，而不是通過解析字符串來完成。

如果傳遞到組件都引用應呈現就好用下面的渲染方法（注：有利於本地地圖的方法去除lodash，爲清楚起見）：

class Landing extends React.Component { 
    render() { 
    return infoPapers.map(({ description, Icon }, idx) => { 
     return (
     <div key={ idx }> 
      <Icon /> 
      {description} 
      </div> 
    ); 
    }); 
    } 
};

這裏有一個工作示例：https://jsfiddle.net/svygw338/

來源

2017-10-18 11:36:39 pawel

動態更改React組件標籤

回答

相關問題