ReactJs 组件未显示

Question

我是 reactjs 的新手，正在尝试测试一个非常基本的组件，但似乎我所有的努力都是徒劳的，因为它没有出现在浏览器中。

我正在使用 asp.net MVC 5 应用程序，并且我一直在遵循本教程 https://reactjs.net/getting-started/tutorial_aspnet4.html 因为教程指出您需要添加 React.Web.Mvc4 Nuget 包，其中包含一些依赖性。

我的简单 React 组件 (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>

我是不是漏掉了什么？

Answer 1

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

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

基于react docs"using the style attribute as the primary means of styling elements is generally not recommended"

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

ReactJs 组件未显示

ReactJs Component not showing

asp.net-mvc

reactjs

reactjs.net