ReactJS组件未显示

我是ReactJs并试图测试非常基本的组件的新手，但是我的所有挣扎似乎都是徒劳的，因为它没有在浏览器中出现。

我正在使用ASP.NET MVC 5应用程序，并且我一直在遵循此教程https://reactjs.net/getting-started/tutorial_aspnet4.html作为教程状态，您需要添加react.web.mvc4具有一些依赖性的Nuget软件包。

我的简单反应组件（simplecomponent.jsx）

var ComponentBox = React.createClass({
    render: function() {
        return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
    }
});
ReactDOM.render(
    <ComponentBox />,
    document.getElementById('reactDiv')
);

我的剃须刀视图很简单

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>

</head>
<body>
    <div id="reactDiv"></div>
    <script src="@Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>

我错过了什么？

解决我问题的解决方案是替换我的JSX文件中的样式元素，如下

var ComponentBox = React.createClass({
    render: function () {
        return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
    }
});

基于React Docs"使用样式属性作为样式元素的主要手段，通常不建议使用"

通过使用JavaScript对象将样式存储为属性，我希望这会帮助某人。

相关内容

最新更新

热门标签：