Question

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

我正在使用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“通常不建议使用样式属性作为样式元素的主要方法”

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

ReactJs组件未显示

1 个答案: