react props 数据传递............-原创手记-慕课网

react props 数据传递............

qaytix 2017-11-19 00:42:50 浏览 2949

qaytix

关注TA

手记 104

粉丝 37

获赞 165

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript" src="../dist/react.js"></script>
<script type="text/javascript" src="../dist/react-dom.js"></script>
<script type="text/javascript" src="../dist/babel.js"></script>
<script type="text/babel">

class PersonInfo extends React.Component{
    render(){
        return(
            <ul>
                <li>姓名：{this.props.name}</li>
                <li>性别：{this.props.sex}</li>
                <li>年龄：{this.props.age}</li>
            </ul>
        )
    }
}

let porson={
    name:'tahirjna',
    sex:'男',
    age:23
}

 /*1.如何从组件外部向组件内部传递数据 ？
  组件标签属性指定---> 组件对象的props属性中

  2.如何在组件内部获取从外部传入的数据？ 这个数据props里面
  */
ReactDOM.render(
    <PersonInfo name={porson.name} sex={porson.sex} age={porson.age}/>,
    document.getElementById('container')
);

</script>

</pre>

相关标签: Html/CSS

0人推荐

发表评论