20-组件.html
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <!-- 也有引browser.js 本质上也是babel--> <script src="./babel.min.js"></script> <script type="text/babel"> //App是自定义组件,如何定义?三种方式 //第一种,函数式组件,这种方式性能好,但有局限性 //函数名为组件名(组件名的首字母必须大写,否则报错) function App(props){ //参数props适用于存储组件属性值的对象 //组件的属性就是参数,属性会变成一个个键值形成一个对象作为参数传给函数 //组件的属性都自动会 console.log(props) //组件函数内必须要有return,将组件的模板(JSX编写)返回 //组件也必须要有根元素对象 return (<h1>hello,component</h1>) } const a="我是变量" //给了个content属性,这个属性可以是字符串也可以是变量 ReactDOM.render(<App content='我是content给你的数据' value={a }></App>,document.getElementById('root')) </script>
21-组件的定义方式2.html
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <!-- 也有引browser.js 本质上也是babel--> <script src="./babel.min.js"></script> <script type="text/babel"> //App是自定义组件,如何定义?三种方式 //第一种,函数式组件,第二种方式,用class声明类定义 //类名即组件名,组件名的首字母必须大写 class App extends React.Component{ //默认的构造 //要写一些自己的属性,就要显示的写出来constructor constructor(props) { super(props);//调用父类的构造函数,不继承属性就拿不到 console.log(props) } //用类方式i定义的组件必须要有render函数 render(){ console.log(this.props)//this表示当前类的一个实例 //render的函数中步需将组件的模板JSX返回 return (<div> <p>{this.props.value}</p> <h1>{this.props.content}</h1> </div> ) } } ReactDOM.render(<App content='我是content给你的数据' value={a }></App>,document.getElementById('root')) //<App></App>这里是创建一个实例的 </script>