我正在尝试使用Visual Studio 2015 Professional Update 1处理嵌入在ASP.NET MVC项目视图中的react.js Javascript代码中的JSX代码。根据一些博客文章,Update 1应该支持JSX,但我无法弄清楚如何实现它,所以我希望你们中的一个遇到同样的问题,并指出我正确的方向。
我通过Nuget安装了 react.js (0.14.7),并在视图中包含了两个脚本文件,如下面的简单测试页中所示。现在,Intellisense在JSX发挥作用的所有地方都生气,例如:在ButtonCounter组件的render方法中。
我需要在VS胆量中设置一些选项吗?提前谢谢!
<script src="~/Scripts/react/react-with-addons.js"></script>
<script src="~/Scripts/react/react-dom.js"></script>
<article>
<div id="#react-container">
</div>
</article>
<script type="text/javascript">
var ButtonCounter = React.createClass({
style: function() {
return {backgroundColor: this.props.colour};
},
render: function() {
return(
<div>
<h1>{this.props.colour} counter</h1> // (3)
<button style={this.style()}
onClick={this.add}>+</button>
<p>Current count:
<span>{this.state.count}</span>
</p>
<hr />
</div>
);
}
});
var App = React.createClass({
getInitialState: function() {
return {colours: ['red', 'green', 'blue']};
},
buttons: function() {
return this.state.colours.map(function(colour) {
return(<ButtonCounter colour={colour} />);
});
},
render: function() {
return(
<div>{this.buttons()}</div>
);
}
});
React.render(<App />,
document.querySelector('#react-container'));
</script>