React中文乱码

今天使用ReactCSSTransitionGroup插件做一个简单的List列表淡入淡出动画,发现出现乱码,我确定我的编辑器使用的utf-8编码,各位大神有遇到过这样的问题吗?

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>League of Legends</title>
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="lib/react.js"></script>
    <script type="text/javascript" src="lib/react-dom.js"></script>
    <script type="text/javascript" src="lib/browser.min.js"></script>
    <script type="text/javascript" src="lib/react-with-addons.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script src="index.js" type="text/babel" charset="utf-8"></script>
</html>
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var TodoList = React.createClass({
    getInitialState: function() {
        return {items: ['hello', 'world', 'click', 'me']};
    },
    handleAdd: function() {
        var newItems =
            this.state.items.concat([prompt('Enter some text')]);
        this.setState({items: newItems});
    },
    handleRemove: function(i) {
        var newItems = this.state.items;
        newItems.splice(i, 1);
        this.setState({items: newItems});
    },
    render: function() {
        var items = this.state.items.map(function(item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));
        return (
            <div>
                <button onClick={this.handleAdd}>添加</button>
                <ReactCSSTransitionGroup transitionName="example">
                    {items}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
});

React.render(
    <TodoList />,
    document.getElementById('app')
);

图片描述

阅读 12.6k
4 个回答

编辑器是utf-8,那你确认文件编码格式是utf-8了吗?

设置浏览器编码

看了一下,关键在于:

<script src="index.js" type="text/babel" charset="utf-8"></script>

你的React代码并不是直接被浏览器使用的(React有JSX),而是要通过工具转换的,从你引用的文件来看,是这个:

<script type="text/javascript" src="lib/browser.min.js"></script>

具体的转换过程得自己查。或者你尝试把代码放到HTML里看看,即把上面的改成如下并放在<body>内:。

<script type="text/babel">
 // index.js 的代码
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题