Javascript 使用新的ReactJS呈现旧的ReactJS组件

我目前正在将一个非常旧的ReactJS应用程序移植到ReactJS 16，但是我正在努力研究

render

函数的工作原理，因为我已经没有了

React.DOM

在旧组件上，我得到了以下内容（我从示例中删除了不必要的代码）：

但是，我很难理解如何将

render（）

函数重写为最新版本？我已经设法做到了以下几点，但我不知道如何对DOM进行多维调用

    class BetBar extends React.Component {

        render() {
            if(this.state.engine.connectionState !== 'JOINED' || this.state.engine.gameState === 'STARTING')
                return (<div class='bet-bar-starting'/>);

            let betPercentages = calculatePlayingPercentages(this.state.engine);
            let playingLostClass, cashedWonClass, mePlayingClass;

            if(this.state.engine.gameState === 'ENDED') {
                playingLostClass = 'bet-bar-lost';
                cashedWonClass = 'bet-bar-won';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-lost': 'bet-bar-me-won';
            } else {
                playingLostClass = 'bet-bar-playing';
                cashedWonClass = 'bet-bar-cashed';
                mePlayingClass = StateLib.currentlyPlaying(this.state.engine)?  'bet-bar-me-playing': 'bet-bar-me-cashed';
            }

            //I don't understand how to do the D.div functions...

        }

    }

    ReactDOM.render(<BetBar />);

类BetBar扩展了React.Component{
render（）{
if（this.state.engine.connectionState！=='JOINED'| | this.state.engine.gameState=='STARTING'）
返回（）；
设betPercentages=calculatePlayingPercentages（this.state.engine）；
让playingLostClass、cashedWonClass、mePlayingClass；
如果（this.state.engine.gameState==='end'）{
playingLostClass=‘赌杆输了’；
cashedWonClass='赌杆赢'；
mePlayingClass=StateLib.currentlyPlaying（this.state.engine）？“赌吧我输了”：“赌吧我赢了”；
}否则{
playingLostClass=‘赌杆玩’；
cashedWonClass='赌杆已兑现'；
mePlayingClass=StateLib.currentlyPlaying（this.state.engine）？“赌吧我玩”：“赌吧我兑现”；
}
//我不明白怎么做D.div函数。。。
}
}
ReactDOM.render（）；

您正在查看的代码来自JSX之前。JSX引入了一种语法，允许您在不调用函数的情况下创建元素。这将产生一种更具声明性的样式，类似于HTML，允许您描述组件

要将旧代码（JSX之前的代码）转换为现代的React，只需理解函数调用

D.div({ className: 'bet-bar-container' })

这将创建一个类名为“bet bar container”的div，在React中，它将HTML属性作为参数，并将它们应用于所需的DOM元素

<div className="bet-bar-container"></div>

因此，例如，对于您拥有的代码，它将大致转换为以下内容：

<div className="bet-bar-container">
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWon + '%' }}></div>
    <div className="mePlayingClass", style={{ width: betPercentages.me + '%' }}></div>
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWonAfter + '%' }}></div>
    <div className="playingLostClass", style={{ width: betPercentages.playingLost + '%' }}></div>
</div>

是的，这是预期的HTML，但是如何在

render（）函数中返回它呢？只需将其括在括号中并返回即可
<div className="bet-bar-container">
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWon + '%' }}></div>
    <div className="mePlayingClass", style={{ width: betPercentages.me + '%' }}></div>
    <div className="cashedWonClass", style={{ width: betPercentages.cashedWonAfter + '%' }}></div>
    <div className="playingLostClass", style={{ width: betPercentages.playingLost + '%' }}></div>
</div>