javascript - React js问题

Question

我需要一些关于reactJS的帮助。我有一个任务，就是写一段代码。当用户打开此代码时，他(她)会看到一个将其他用户发送到游戏的按钮。当我单击此按钮时，我看到有 2 个按钮拒绝邀请或接受。

但是我的浏览器显示空白页面。

这是我的代码:

<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>

我做错了什么？

Answer 1

在react中，自定义组件必须采用PascalCase，而不是camelCase。如果 babel jsx 转译器看到一个以小写字母开头的元素(即在“gameInterface”中)，它会将其转译为:

React.createElement("gameInterface", null);

而不是你所希望的:

React.createElement(gameInterface, null);

这是对您创建的类的引用。 React 这样做是为了区分原生 DOM 元素和自定义组件。将组件名称大写，您将得到正确的行为:

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

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