ReactJS - 有條件地渲染空白

Question

我試圖構建一個按鈕組件，它能夠在元素的子元素之前和之後設置圖標。

因此，道具是這樣的：

export interface IButtonProps { 
    children?: React.ReactNode; 
    leftIcon?: FontAwesomeIcon; 
    rightIcon?: FontAwesomeIcon; 
} 

而FontAwesomeIcon是一個枚舉保持可用的圖標。

在按鈕的render-功能我會檢查是否有圖標集。如果是這樣，則應該有兒童和圖標之間的圖標和空白。

render(): JSX.Element { 
    let { children, leftIcon, rightIcon } = this.props; 

    return (
     <button> 
      {leftIcon && <FontAwesome icon={leftIcon} />} 
      {leftIcon && " "} 
      {children} 
      {rightIcon && " "} 
      {rightIcon && <FontAwesome icon={rightIcon} />} 
     </button> 
    ); 
} 

雖然這個解決方案是工作，我不知道是否有比必須爲一個圖標兩次檢查要設置一個簡單的方法。我也希望能夠使用 而不是。 有什麼辦法可以逃避空白，所以我可以寫一些像{leftIcon && <FontAwesome icon={leftIcon} />&nbsp;}？

我試圖{leftIcon && <FontAwesome icon={leftIcon} />{"&nsbp;"}}或{leftIcon && <FontAwesome icon={leftIcon} />{&nsbp;}}導致

TS1005： '}' 的預期。

Answer 1

本文認爲 應爲故意空白http://andrewhfarmer.com/how-whitespace-works-in-jsx/

看到工作，你應該能夠插入 內嵌我還以爲你不需要把它包起來括號其他HTML或一個字符串。想象一下，就像寫作<br />一樣，你應該可以將它粘貼到<FontAwesome />組件的末尾。

render(): JSX.Element { 
    let { children, leftIcon, rightIcon } = this.props; 

    return (
    <button> 
     {leftIcon && <FontAwesome icon={leftIcon} />&nbsp;} 
     {children} 
     {rightIcon && &nbsp;<FontAwesome icon={rightIcon} />} 
    </button> 
); 
} 

聲明，這是未經測試

作爲替代，這github上的問題https://github.com/facebook/react/issues/1643建議你可以故意空白添加{' '}，所以我還以爲這將工作太：

render(): JSX.Element { 
    let { children, leftIcon, rightIcon } = this.props; 

    return (
    <button> 
     {leftIcon && <FontAwesome icon={leftIcon} />{' '}} 
     {children} 
     {rightIcon && {' '}<FontAwesome icon={rightIcon} />} 
    </button> 
); 
} 

免責聲明，也未經測試