Question

我正在关注udemy的一个简单的ReactJS教程，由于某种原因，我的代码似乎是同一行的行不起作用，我也没有在chrome中的dev工具中出现任何错误。

这是我的代码，但我似乎无法弄清楚它为什么不起作用。我使用Brackets作为我的IDE，也使用chrome。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.20/browser.js"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <script type="text/babel">

        var secondComp2 = React.createClass({

            render: function () {

                return (

                    <div>
                        <h1>{this.props.name}</h1>
                    </div>

                )

            }

        });

        ReactDOM.render(

            <secondComp2 name="hello world" />,
            document.getElementById('app')

        );

        </script>
    </body>
</html>

Answer 1

React组件始终在PascalCase中定义。这将解决您的问题。

<script type="text/babel">    
        var SecondComp2 = React.createClass({    
            render: function () {    
                return (    
                    <div>
                        <h1>{this.props.name}</h1>
                    </div>    
                );    
            }    
        });    
        ReactDOM.render(    
            <SecondComp2 name="hello world" />,
            document.getElementById('app')    
        );    
</script>

Answer 2

规则是所有React组件必须以大写字母开头，因为小写字母被视为HTML元素，

因此请使用此SecondComp2代替secondComp2。

检查工作fiddle：https://jsfiddle.net/5nvd3o6t/

简单的reactjs教程代码不工作，开发工具没有错误

2 个答案: