关于react中自定义属性的名称

Question

var ListDisplay = React.createClass({
    //修改数据，监听点击事件，点击后重新渲染span为input
    //删除数据 splice（）
    //js数组操作
    getInitialState:function(x){
        return    {
            changeIndex:x,
            changeValue:""
        }
    },
    typeText:function(e){
        this.setState({
            changeValue:e.target.value
        })
    },
    changeWhenuClick:function(e){
        var index=e.target.getAttribute('data-dex')
        console.log(index)
        var value = this.props.data[index]
        this.setState({
            changeIndex:index,
            changeValue:value
        })
    },
    saveAfterChange:function(){

    },
    render:function(){
        return(
            <ul>
                {
            this.props.data.map(function(item,i){
                if(this.state.changeIndex == i){
                    return(
                    <li>
                        <input type="text" value={this.state.changeValue} onChange={this.typeText} ref="newData"/>
                        <button>保存</button>
                    </li>    
                    )
                }else{
                    return(
                    <li>
                            <span>{item}</span>
                            <button data-dex={i} onClick={this.changeWhenuClick}>Click</button>    
                        </li>
                )
                }
            }.bind(this))
        }
            </ul>
        )
    }
})

这里的 data-de 如果不是以data开头的 统统都console不出来，这是为什么啊

Answer 1

怎么还在使用 createClass。

即使不适用 React，自定义的属性也推荐使用 data- 开头，这是标准的形式。

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

https://facebook.github.io/re...