遇到問題渲染爲道具通過的陣營元素

我有以下組成部分：遇到問題渲染爲道具通過的陣營元素

const Chip = (props) => { 
    const ChipIcon = props.icon; 
    let deleteButton = null; 

    if (!props.readOnly) { 
    deleteButton = <Delete 
     style={styles.deleteButton} 
     onTouchTap={props.onRemove} 
    /> 
    } 

    return <div className="Chip" style={styles.tag}> 
    <ChipIcon /> 
    {' ' + props.label + ' '} 
    {deleteButton} 
    </div> 
};

props.icon絕對是一個材料UI SvgIcon，但我得到警告，當我試試這個。

arning：React.createElement：類型不應該爲null，undefined，boolean或number。它應該是一個字符串（用於DOM元素）或ReactClass（用於複合組件）。檢查Chip的渲染方法。

但這似乎工作：

const Chip = (props) => { 
    const chipIcon = props.icon; 
    let deleteButton = null; 

    if (!props.readOnly) { 
    deleteButton = <Delete 
     style={styles.deleteButton} 
     onTouchTap={props.onRemove} 
    /> 
    } 

    return <div className="Chip" style={styles.tag}> 
    {chipIcon} 
    {' ' + props.label + ' '} 
    {deleteButton} 
    </div> 
};

爲什麼不是第一位的工作，如果它是一個真正的陣營元素？

來源

2016-04-14 ffxsam

你有沒有嘗試在返回的值周圍加括號？ JS認爲return語句在第一行之後完成了，可能有些事情出錯了？ – Nick

您的icon屬性已經是元素，而不是您用於呈現元素的類。

在JSX <ChipIcon />將被轉換爲React.createElement(ChipIcon, null)。您的icon屬性是已經創建的元素，而不是您傳遞給React以爲您創建元素的類。

來源

2016-04-14 21:17:22 Buzinas

如果ChipIcon是一個反應組件，您的第一個示例將工作。你的第二個例子有效，因爲chipIcon是React 元素，即已經呈現的組件。

您可以通過以下方式使用jsx語法實例化組件：<MyComponent />如果MyComponent是React組件。如果MyComponent已經是渲染組件，則使用語法{ MyComponent }注入它，因爲它已經是有效的元素。但是使用渲染的元素作爲組件類沒有什麼意義：<MyComponent />確實是React.createElement(MyComponent, null)。

來源

2016-04-14 21:21:45 VonD

遇到問題渲染爲道具通過的陣營元素

回答

相關問題