2

我是 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>

我错过了什么？

4

1 回答 1

1

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

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

基于反应文档“通常不推荐使用样式属性作为样式元素的主要方式”

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

于 2017-12-21T09:48:56.113 回答