react学习-组件和props传值

标签：是你   rac   ade   元素   cto   tag   如何   model   知识   

1. 函数组件

   // /src/index.js
   ...
   function Welcome (props) {
     return (
       <div>
         <h3>hello function component</h3>
         <span>{props.data}</span>
       </div>
     )
   }

    

声明一个函数，以返回值的形式返回组件模板。如果要从父组件传值进来的话，在函数上加一个props参数（props传值部分会详细介绍）

2. 以类的形式创建组件

   • 创建一个es6类，继承 React.Component，类名就是你在父组件中引入的标签名

   • 类中写一个 render()，函数的返回值就是该组件的模板

   • 将上面的函数体放入render函数中

   • 在render()使用this.props可以获取父组件传过来的数据的引用

   class Welcome extends React.Component {
     render () {
       return (
         <div>
           <h3>hello class component</h3>
           <span>{this.props.data}</span>
         </div>
       )
     }
   }

    

声明一个类继承Welcome,在类里面声明要给render函数返回组件模板

总结：

• 自定义组件都要以大写字母开头。一般在react中，小写字母开头一般表示标签,如<div />

• 组件中的标签元素一定要有一个根标签将它们包裹

3. props传值：

   子组件不能直接修改父组件的数据，要通过触发父组件的方法，让父组件自己改数据（请看综合练习1）

   props传递对象

const dataForm = { name: ‘tina‘ }
const element = (
  <div>
    <Welcome dataForm={dataForm} />
  </div>
)

调用组件都是以下面的方式：

const element = (
  <div>
    <Welcome addr="黄冈" name="zhangsan" />
  </div>
)
ReactDom.render(element, document.getElementById(‘root‘))

4. props验证

5. 注释的使用

   class Welcome extends React.Component {
     render () {
       // 这是在模板外面的注释
       return (
         <div>
           {/**
              这是在模板中使用注释
              */}
           <h3>hello class component</h3>
           <span>{this.props.data}</span>
           <span>{this.props.obj.name}</span>
         </div>
       )
     }
   }

    

当在模板中使用注释，要用{}将注释包裹起来，代表js语法，否则就会报错；

当在模板外外面使用注释，就和在js文件总写注释方式一样

练习：

1. 在子组件中改变父组件的状态

   // ChildToFa.jsx
   import React from ‘react‘
   ?
   export default class ChildToFaDemo extends React.Component {
     changeProps (data) {
       console.log(this, data)
       this.props.changeData(data)
     }
   ?
     render () {
       return (
         <div>
           <p>{this.props.data}</p>
           <button onClick={this.changeProps.bind(this, ‘子组件的数据‘)}>修改</button>
         </div>
       )
     }
   }

   // App.jsx
   import React from ‘react‘
   import ChildToFaDemo from ‘./ChildToFa‘
   ?
   export default class App extends React.Component {
     constructor () {
       super ()
       this.state = {
         data: ‘父组件的数据‘
       }
     }
   ?
     changeData = (data) => {
       this.setState({
         data
       })
     }
   ?
     render () {
       return (
         <div>
           <ChildToFaDemo data={this.state.data} changeData={this.changeData} />
         </div>
       )
     }
   }

   知识点：

   如何解决事件处理函数中的this指向和传参问题

   // wrong
   <button onClick={this.changeProps(‘子组件的数据‘)}>修改</button>  // 这种方式会直接执行changeProps函数，且this指向undefined
   ?
   // right: bind第一个参数是函数中this的指向；后面的参数是要传递给函数的
   <button onClick={this.changeProps.bind(this, ‘子组件的数据‘)}>修改</button>

   子组件中改变父组件中的数据： 通过this.props.changeData()触发父组件中的方法-前提条件是父组件有把这个方法传给子组件

    

react学习-组件和props传值

标签：是你   rac   ade   元素   cto   tag   如何   model   知识   

原文地址：https://www.cnblogs.com/lovlyGir/p/14906348.html