加载中...
  • React中 JSX防踩坑的几个地方

    JSX代码注释

    我第一次写JSX的注释,是直接像以前js注释写的,当然这样写是不对的。

    1
    2
    3
    4
    5
    6
    7
    <Fragment>
    //第一次写注释,这个是错误的
    <div>
    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
    </Fragment>

    JSX注释,有以下两种写法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <Fragment>
    {/* 正确注释的写法 */}
    {
    //正确注释的写法
    }
    <div>
    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
    </Fragment>

    推荐第一种注释。

    JSX中的class陷阱

    比如要给朴素单纯的界面,加入黄色成分,让我们的文本框又粗又黄。我们先来错误演示。

    第一步:先写一个CSS样式文件,在src目录下,新建一个style.css的样式文件。

    1
    .input {border:3px solid #ae7000}

    第二步:在Xiaojiejie.js里引入,先用import进行引入

    1
    import './style.css'

    第三部:给JSX加入class,注意下面的代码是错误的。

    1
    <input class="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

    虽然现在页面是可以正常显示结果的,但是你代开浏览器控制台会发现Warning警告。

    1
    2
    3
    4
    index.js:1437 Warning: Invalid DOM property `class`. Did you mean `className`?
    in input (at SmailSmailGirl.js:19)
    in div (at SmailSmailGirl.js:18)
    in Xiaojiejie (at src/index.js:5)

    意思就是要把class换成className,它是防止和js中的class类名 冲突,所以要求换掉。这也算是一个小坑吧。

    JSX中的html解析问题

    如果想在文本框里输入一个

    标签,并进行渲染。默认是不会生效的,只会把

    标签打印到页面上,这并不是我想要的。如果工作中有这种需求,可以使用dangerouslySetInnerHTML属性解决。具体代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <ul>
    {
    this.state.list.map((item,index)=>{
    return (
    <li
    key={index+item}
    onClick={this.deleteItem.bind(this,index)}
    dangerouslySetInnerHTML={{__html:item}}
    >
    </li>
    )
    })
    }
    </ul>

    上面的代码就可以实现html格式的输出。

    JSX中标签的坑

    JSX中

    先看下面的代码,我们在文本框前面加入一个

    1
    2
    3
    4
    5
    6
    <div>
    <label>加入服务:</label>
    <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>

    这时候想点击“加入服务”直接可以激活文本框,方便输入。按照html的原思想,是直接加ID就可以了。代码如下:

    1
    2
    3
    4
    5
    6
    <div>
    <label for="jspang">加入服务:</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>

    这时候你浏览效果虽然可以正常,但console里还是有红色警告提示的。大概意思是不能使用for.它容易和javascript里的for循环混淆,会提示你使用htmlfor。

    1
    2
    3
    4
    5
    6
    <div>
    <label htmlFor="jspang">加入服务:</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>

    这时候代码就正确了,可以实现点击

    转自:我这里是看了技术胖的文章后想记录下,所以复制了过来

    上一篇:
    React class 父组件调用子组件的方法
    下一篇:
    Simple React Snippets插件
    本文目录
    本文目录