Accessibility(可访问性)

在学习访问性之前，先回顾一个小知识点——解构赋值

var {name,age} = {name:'xiao',age:18}
console.log({name}); //{name:'xiao'}
console.log({age}); //{age:18}

接着继续。。。
语义化的HTML

/**
 * Created by mapbar_front on 2019/7/23.
 */
import React,{Component,Fragment} from 'react';

function ListItem({item}){
    return  <Fragment>
                <dt>{item.name}</dt>
                <dd>{item.age}</dd>
            </Fragment>
}

class Accessibility extends Component{
    constructor(props){
        super(props);
        this.state = {
            data:[
                {
                    id:101,
                    name:'tianxia',
                    age:18,
                },{
                    id:102,
                    name: 'xiao666',
                    age:22,
                }
            ]
        }
    }
    render(){
        return(
            <div>
                <dl>
                    {
                        this.state.data.map((item,i)=>{
                            return <ListItem key={item.id} item={item}/>
                        })
                    }
                </dl>
            </div>
        )
    }
}
export default Accessibility;