Javascript React属性为'；t工作不正常_Javascript_Reactjs

Javascript React属性为'；t工作不正常

javascript reactjs

Javascript React属性为'；t工作不正常,javascript,reactjs,Javascript,Reactjs,各位!！我正在react上构建一个简单的单页应用程序。这是职责清单。此列表中的圆圈是用svg制作的不幸的是，React.js代码不起作用。它给了我一页空白这是我的代码： <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" type = "text/css" href = "bootstra

各位!！我正在react上构建一个简单的单页应用程序。这是职责清单。此列表中的圆圈是用svg制作的

不幸的是，React.js代码不起作用。它给了我一页空白

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">

        <link rel = "stylesheet" type = "text/css" href = "bootstrap/dist/css/bootstrap.css">
        <link rel = "stylesheet" type = "text/css" href = "bootstrap/dist/css/bootstrap-theme.css">
        <link rel = "stylesheet" type = "text/css" href = "bootstrap/MaterialDesign/css/materialdesignicons.css">

        <link href = "bootstrap/MaterialDesign/fonts/materialdesignicons-webfont.eot">
        <link href = "bootstrap/MaterialDesign/fonts/materialdesignicons-webfont.svg">
        <link href = "bootstrap/MaterialDesign/fonts/materialdesignicons-webfont.ttf">
        <link href = "bootstrap/MaterialDesign/fonts/materialdesignicons-webfont.woff">
        <link href = "bootstrap/MaterialDesign/fonts/materialdesignicons-webfont.woff2">

        <script src = "bootstrap/dist/js/bootstrap.js"></script>
        <script src = "bootstrap/dist/js/npm.js"></script>
        <script src = "react/react.js"></script>
        <script src = "react/react-dom.js"></script>
        <script src = "react/browser.js"></script>

        <style>
            body{
                font-family:Arial;
                font-size: 15px;
            }
        </style>
    </head>

    <body>
        <div class = "container-fluid">
            <div class = "col-sm-2">
                <div class = "well well-sm">TODO list
                    <svg style="width:24px;height:24px; align-content:right" viewBox="0 0 24 24">
                        <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
                    </svg>
                </div>

                <div id = "list"></div>

                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                        <path fill="#000000" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                </svg><input type = "text"/>     
            </div>
        </div>

        <script type = "text/babel">

            var list = React.createClass ({
                render: function(){
                    return (<div>
                        <svg style="width:20px;height:20px" viewBox="0 0 24 24">
                            <path fill="#000000" d=[M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z] />
                        </svg>    
                        <p>{this.props.item}</p>
                    </div>
                    );
                }
            });

            ReactDOM.render(<div>
                                <list item = "Feed the dog" />
                                <list item = "Build the house" />
                                <list item = "Wash the car" />
                                <list item = "Make some shopping" />
                                <list item = "Build a list" />
                            </div>, 
            document.getElementById("list"));
        </script>
    </body>
</html>


身体{
字体系列：Arial；
字体大小：15px；
}
待办事项清单
var list=React.createClass({
render:function（）{
返回(
{this.props.item}
);
}
});
ReactDOM.render(
, 
document.getElementById（“列表”）；

我的错误在哪里？

React组件必须以大写字母开头，因此将

list

变量转换为

list

如果React类名称以小写字母开头，则不会调用类内的任何方法，即不会呈现任何内容，并且在浏览器控制台中也不会收到任何错误消息。您将在DOM中看到该元素，但只有空内容

React组件必须以大写字母开头，因此将

list

变量转换为

list

如果React类名称以小写字母开头，则不会调用类内的任何方法，即不会呈现任何内容，并且在浏览器控制台中也不会收到任何错误消息。您将在DOM中看到元素，但只是空内容

控制台中有什么错误？运行代码时，我没有看到任何错误。运行Chrome 58 btw。您的控制台中可能存在重复的错误？运行代码时，我没有看到任何错误。运行Chrome 58顺便说一句。在这方面仍然面临任何问题的可能重复？很好的捕获和解释+1，直到在这方面面临任何问题？很好的捕获和解释+1