JSX的注释。
首先,JSX 代码,是在render 中 return 里面的,然后,它的注释写法是下面这样的。
render() {
return (
<React.Fragment>
<div>
{/*注释*/}
<label htmlFor="insertArea">输入内容</label>
<input
id="insertArea"
value={this.state.inputValue}
onChange={this.handleInputChange}
/>
<button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
</div>
<ul>
{this.getTodoItems()}
</ul>
</React.Fragment>
);
}
元素的样式 class 属性,不要用,使用className 属性。如下。
return (
<TodoItem className='red-btn' deleteItem={this.handleDelete} key={index} content={item} index={index} />
)
不用转义标签,直接按html 显示出来,如下。有实际需要时,可以这样写,但不推荐其他情况下这样写,因为可能有安全风险。
<li
key = {index}
dangerouslySetInnerHTML={{__html: item}}
>
</li>
label 标签。在html 中,label 主要起扩大输入内容的作用。
在React 中,我们想点击label 对应的input 获得焦点,可以如下。(将html 的for 属性,改为htmlFor属性)
render() {
return (
<React.Fragment>
<div>
<label htmlFor="insertArea">输入内容</label>
<input
id="insertArea"
value={this.state.inputValue}
onChange={this.handleInputChange}
/>
<button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
</div>
<ul>
{this.getTodoItems()}
</ul>
</React.Fragment>
);
}