Javascript 反应js问题

我需要一些帮助。我的任务是写代码。当用户打开此代码时，他会看到一个按钮，用于将另一个用户发送到游戏。单击此按钮时，我看到两个按钮拒绝邀请或接受

但我的浏览器显示空页

这是我的代码：

<div id = "gameInterface"></div>

<script type = "text/babel">
    var gameInterface = React.createClass({
        getInitialState: function(){
            return {document.getElementsByClassName('send')}
        },
        render: function(){
            if (document.getElementById('send').state.onclick){
                document.getElementById('decline') && document.getElementById(accept).value;
            }
        },
        buttonToSendInvintation: function(){
           return (
                <div>
                    <button className = 'send'>Send invintation to play to another user</button>
                </div>
           ) 
        },
        buttonToAceptOrDeclineInvintation: function(){
           return (
                <div>
                    <p>Some user sent you an invintation</p>
                    <button className = 'accept'>Accept</button>
                    <button className = 'decline'>Decline</button>
                </div>
           ); 
        }
    });

    ReactDOM.render(<gameInterface />, document.getElementById("gameInterface"));
</script>

var gameInterface=React.createClass({
getInitialState:函数（）{
返回{document.getElementsByClassName（'send'）}
},
render:function（）{
if（document.getElementById（'send'）.state.onclick）{
document.getElementById（'Decept'）&&document.getElementById（accept）.value；
}
},
ButtonSendInvention:函数（）{
返回(
向其他用户发送播放邀请
) 
},
ButtonCaptorDeclineInventation:函数（）{
返回(
某个用户向您发送了邀请

接受
减少
); 
}
});
render（，document.getElementById（“gameInterface”）；

---

我做错了什么

在react中，自定义组件必须是PascalCase，而不是camelCase。如果babel jsx transpiler看到以小写字母开头的元素（即在“gameInterface”中），它会将其传输到：

React.createElement("gameInterface", null);

而不是你所希望的：

React.createElement(gameInterface, null);

这是对您创建的类的引用。React的作用是区分本机DOM元素和自定义组件。将组件名称大写，您将获得正确的行为：

var GameInterface = React.createClass({
    ...
})

ReactDOM.render(<GameInterface />, document.getElementById("gameInterface"));

var GameInterface=React.createClass({
...
})
render（，document.getElementById（“gameInterface”）；