Reactでstyle属性を直接表示(インライン表示)させる方法

Reactで、例えば、CSSのbackground-imageを動的に設定したい場合、JSXで文字列結合してしまうとエラーが発生してしまう。

// エラー
class Hoge extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return <div style="background-image:url(" + {this.props.imgURL} + ">Hello React</div>
    }
}

ReactDOM.render(
    <Hoge />,
    document.querySelector('#_foo')
);

そこで、インラインでstyle属性を表示させたい場合はどうすればいいのだろうか？

答えは、一度、変数にstyleの値を設定して、それを展開するというのが一番の近道だった。

class Hoge extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        let _style = {
            backgroundImage:'url(' + this.props.imgURL + ')'
        }
        return <div style={_style}>Hello React</div>
    }
}

ReactDOM.render(
    <Hoge />,
    document.querySelector('#_foo')
);

参考

reactjs.org