ReactJS - レンダリング条件付き空白

Question

私は要素の子の前後にアイコンを設定できるボタンコンポーネントを作成しようとしています。

したがって、小道具は次のようである：FontAwesomeIcon一方

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

が利用可能アイコンを保持する列挙です。

ボタンのrender -functionでは、アイコンが設定されているかどうかを確認します。そうであれば、アイコンと子供とアイコンの間に空白があるはずです。

この解決策は動作していますが、設定するアイコンを2回確認するより簡単な方法があるのだろうかと思います。またの代わりに を使用したいと思います。 空白をエスケープする方法はありますか？{leftIcon && <FontAwesome icon={leftIcon} />&nbsp;}のようなものを書くことができますか？

私は

TS1005につながる{leftIcon && <FontAwesome icon={leftIcon} />{"&nsbp;"}}または{leftIcon && <FontAwesome icon={leftIcon} />{&nsbp;}}を試してみました： '}' 期待。

Answer 1

この記事では、他の私は、あなたが括弧でそれをラップする必要はありませんと思っているだろうHTMLやと インラインを挿入することができるはずと を見て、意図的な空白http://andrewhfarmer.com/how-whitespace-works-in-jsx/

のために働くべきであることを示唆して文字列。 <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> 
); 
} 

免責事項、まだテストされていない