react

最新推荐文章于 2022-04-30 08:00:00 发布

人生如初见_张默

最新推荐文章于 2022-04-30 08:00:00 发布

阅读量86

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_42176520/article/details/103926951

版权

React 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

react组件：Fragment

render() {
    return (
        <Fragment>//代替最外层包装
            <div></div>
            <ul>
                <li></li>
            </ul>
        </Fragment>
    )
}

list:[...this.state.list,this.state.inputValue];//将input值放到list列表里  ...表示list里所有数据

JSX防踩坑：

注释：return内

render(){
    return (
        <Fragment>
            {/*xxxx*/} 或  {
                                //xxxx
                            }
        </Fragment>
    )
}

标签类：使用className

render() {
    return (
        <Fragment>
            <p className=''></p>
        </Fragment>
    )
}

解析html标签：

render() {
    return (
        <Fragment>
            <ul>
                    {
                        list && list.map((v,i) => {
                            return (
                                <li
                                    key={i}
                                    dangerouslySetInnerHTML={{__html:v}}
                                >这里不能有任何内容</li>
                            )
                        })
                    }
                </ul>
        </Fragment>
    )
}

for:jsx中只能用htmlFor

render() {
    return (
        <Fragment>
            <div>
                <label htmlFor='js'>sdsa</label>
                <input id='js' type='text' ref={(input)=>{this.input=input}}/>
                <button onClick={this.add}>add{length}</button>
            </div>
        </Fragment>
    )
}