react-{this.props}传递参数
基于react环境
{…this.props}是props所提供的语法糖,可以将父组件的所有属性复制给子组件(按照我的通俗理解来说,这就是另类的继承)
App,js
子组件
import React, { Component } from 'react'
class Text extends Component{
constructor(){
super()
}
render(){
const {name,age}=this.props; //解构
return(
<div>
<h2>我的名字:{name}</h2>
<h2>我的年龄:{age}</h2>
</div>
)
}
}
父组件
是运用{…this.props},将父组件中的所有元素给了子组件
export default class App extends Component {
constructor(props) {
super(props);
this.state={
name:'xjj',
age:'18'
}
}
render() {
return(
<Text {...this.state}></Text>
);
};
}
父组件
普通传递参数
export default class App extends Component {
constructor(props) {
super(props);
this.state={
name:'xjj',
age:'18'
}
}
render() {
return(
<Text name={this.state.name} age={this.state.age}></Text>
);
};
}
index.js
import React from 'react';
import ReactDOM from "react-dom";
import App from './App';
ReactDOM.render(<App/>,document.getElementById('root'));
运行结果