一、React创建组件
import React from 'react';//引入react模块
class Home extends React.Component {//创建一个类
constructor(props) {//构造函数
super()
}
render() {//用来获取DOM元素
return (//返回的JSX属性,return里面的第一个标签必须是Div
<div className="Home_cintainer">
</div>
)
}
}
export default Home
render react必须有一个render,它是用来获取DOM元素,如果没有render,React是获取不到在组件里写的JSX标签属性
二、 React组件的props,State属性
props一般用于接收外部传入的数据;而state则用于记录组件内部数据, 而且是需要经常改变的数据。
主要区别:
- State是可变的,是一组用于反映组件UI变化的状态集合;
- 而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。
- 在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
三、父组件向子组件传值
概念:父组件通过属性把值传递到子组件里面去
父组件:
import React, { Component } from 'react';
import Index from "./index.js"//引入子组件,引入的组件名称一定要大写
export default class Home extends Component {
constructor(props) {//1. 定义一个构造函数
super(props)
this.state = {//2. 设置初始化值
items:"我是父组件"
}
}
render() {
console.log(this.state.items)//输出结果看能不能拿到上面定义好的初时化值,因为是在一个值是在一个组件里写的,因此不用props,用state就可以了
return (
<div>
<Index data={this.state.items} />//把引入进来的子组件名称写入到Div里,单标签写入
//data={this.state.items}:通过定义好的data属性,传递到子组件里
</div>
)
}
}
子组件:
import React, { Component } from 'react'
export default class Index extends Component {
constructor(props) {//构造函数,用来接收父组件传来的值
super(props)
this.state = {
}
}
render() {
console.log(this.props.data)//查看父组件是否已经把值传过来了
return (
<div>
{this.props.data.items}//向页面上输出父组件传过来的值
</div>
)
}
}
四、子组件向父组件传值
概念:子组件就是通过父组件定义好的回调函数传到子组件里,子组件里的值在通过回调函数,返回到父组件里
父组件
import React, { Component } from 'react';
import Sone from "./Sone"
export default class Father extends Component {
constructor(props) {
super(props)
this.state = {
value: '',//设置初始值
}
}
handle = (index) => {//写个构造函数
this.setState({//获取子元素传到的index上的数据,然后赋值到value上
value: index
})
console.log(index)
}
render() {
return (
<div>
<Sone item={this.handle} />//把在父组件上写好的方法通过属性传到父属性里
</div>
)
}
}
子组件
import React, { Component } from 'react'
export default class Sone extends Component {
constructor(props) {
super()
this.state ={
value:''
}
}
handleOnChange=(index)=>{
console.log(index.target.value)
this.props.item(index.target.value)//通过父组件传进来的属性,把值回调到构造函数中
}
render() {
return (
<div>
<input type="text" onChange={this.handleOnChange} />//通过onChange事件。把获取到的value值传到上面定义的构造函数中
</div>
)
}
}
兄弟传值
概念:兄弟传值就是,一个子组件通过回调函数,把值传到父组件里,然后父组件通过属性传递到另一个子组件里
父组件
import React, { Component } from 'react'
export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
valueInpur: ""
}
}
handle = (index) => {
this.setState({
value: index
})
console.log(index)
}
render() {
console.log(this.props.data)//查看父组件是否已经把值传过来了
return (
<div>
<p>{this.state.valueInpur}</p>
<Sone2 items={this.state.value} />//把获取到的值传到另一个子组件里
<Sone item={this.handle} />//把定义好的一个方法通过属性传递到第一个子组件里
</div>
)
}
}
第一个、子组件
import React, { Component } from 'react'
export default class Sone extends Component {
constructor(props) {
super()
this.state ={
value:''
}
}
handleOnChange=(index)=>{
console.log(index.target.value)
this.props.item(index.target.value)
}
render() {
return (
<div>
<input type="text" onChange={this.handleOnChange} />
</div>
)
}
}
第二个、子组件
import React, { Component } from 'react'
export default class sone2 extends Component {
render() {
return (
<div>
{this.props.items}
</div>
)
}
}