Question

我需要一些有关reactJS的帮助。我有编写代码的任务。当用户打开此代码时，他会看到一个按钮，将另一个用户发送到游戏中。当我单击此按钮时，我看到2个按钮拒绝invintation或接受。

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

这是我的代码：

<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

在反应中，自定义组件必须位于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"));

反应js问题

1 个答案: