React 基础入门(三): JSX语法、绑定数据、绑定属性、引入图片、循环数组渲染数据

本文共有3062个字,关键词:ReactReact入门React教程

React JSX语法、绑定数据、绑定属性、引入图片、循环数组渲染数据

React JSX语法

不加任何引号
var html = <h1>React</h1>;
标签一定要有对应的结束标标签或结束标识:
var html = <input type="text" value="React" />;
var div = <div>React</div>;
只能有一个根节点
 var html = 
    <div>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </div>
不能在标签当中加注释

在 jsx 语法当中,html 标签是一个对象,是一种数据结构,而不是真实的 dom 节点,也不是字符串,所以在标签当中不能添加注释。

 var html = 
    <div>
        <!--不能添加注释,这里会报错-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </div>
正确的注释写法
{/* 这里是注释 */}
jsx 语法允许 html 标签和 javascript 代码混写

在 jsx 语法当中,要在 html 标签中用到 js 代码,则用花括号({expression})括起来。

var name = "DK";
var style = {fontSize: '12px', color: 'red'};
var html = <span style={style}>{name}</span>;

最终上面的代码将会解析成

<span style="font-size:12px; color:red">DK</span>

React绑定数据

constructor(props){
        super(props);   //固定写法
        this.state={
            msg:'我是一个home组件',
            title:'我是一个title'
        }
    }
render(){
    return(
        <div>
            {this.state.msg}
            <div title={this.state.title}>我是一个div</div>
        </div>
    )
}

title=不能加引号(“”)

React绑定对象

React绑定属性

class要换成className

<div id="box" className='red'>我是一个红的的div---id</div>

for要换成 htmlFor

<label htmlFor="name">姓名</label>

style直接输出

<div style={{"color":'red'}}>我是一个红的的 div  行内样式</div>

style数组输出

<div style={this.state.style}>我是一个红的的 div  行内样式</div>

this.state={
    style:{
        color:'red',
        fontSize:'40px'
    }
}

其他的属性和以前写法是一样的

React引入图片的三种方式

第一种,导入再使用
import logo from '../assets/images/1.jpg';
<img src={logo} />
第二种,本地图片
<img src={require('../assets/images/logo.svg')} with="60" />
第三种,网络图片直接输出
 <img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />

React循环数组渲染数据的几种方式

数组数据

this.state={
    list:['11111111111','222222222222','3333333333333'],            
    list2:[<h2 key='1'>我是一个h2</h2>,<h2 key='2'>我是一个h2</h2>],
    list3:[
        {title:"新闻11111111"},
        {title:"新闻22222"},
        {title:"新闻33333333"},
        {title:"新闻444444444"}
    ]
}

第一种

render(){
    let listResult=this.state.list.map(function(value,key){
            return <li key={key}>{value}</li>
    })
    
    return(
        <div className="news">
            <ul>
                 {listResult}
            </ul>
        </div>
    )
}

第二种

return(
    <div className="news">
        {this.state.list2}
    </div>
)

第三种

return(
    <div className="news">
        <ul>
           {
                this.state.list3.map(function(value,key){
                    return (<li key={key}>{value.title}</li>);
                })
            }
         </ul>
    </div>
)

LGS

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:苏米志,敬请关注!
广告还在招~
添加新评论
暂无评论