正文
创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1.创建组件的方法 函数组件 class组件1.1 函数组
无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下
import React from 'react '; //定义一个React组件
function App() {
return (
<div>
hello React...
</div>
);
} export default App;
1.1 class组件
`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下
import React from 'react'; //定义一个React组件
class App extends React.Component{
render(){
return (
<div>
Hello，Reactjs！！
</div>
);
}
} export default App;
在其他文件中引用组件 import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
2.组件的props属性
2.1 概念 :react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。
2.2 `props`属性的特点
1.每个组件对象都会有props（properties的简写）属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值：this.props.propertyName
4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）
5.对props中的属性值进行类型限制和必要性限制
2.3 代码示例
使用函数组件：
import React from 'react';
import ReactDOM from 'react-dom'; //使用函数组件
function User(props){
//在组件中获取props属性值
return <div>{props.name}，{props.age}</div>
} //定义数据
const person ={
name:'张三',
age:,
sex:'男'
} ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
使用类组件：
import React from 'react';
import ReactDOM from 'react-dom'; //使用class组件
class User extends React.Component{
render(){
return (
<div>{this.props.name}--{this.props.age}</div>
);
}
} //数据
const person ={
name:'张三',
age:,
sex:'男'
} ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
3.state属性的用法和特点
3.1
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
3.2代码示例：
import React from 'react';
import ReactDOM from 'react-dom'; class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
} render(){
//state属性是可修改的
this.state.name = 'jack';
return (
<h1>{this.state.name}</h1>
);
}
} ReactDOM.render(<Person />, document.getElementById('root'));
4.父子组件传值
4.1父组件传值子组件
在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到 这个param的值。
父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。
代码如下- 父组件代码片段：
constructor(props){
super(props)
this.state={
message:"i am from parent"
}
}
render(){
return(
<Child txt={this.state.message}/>
)
}
}
子组件代码片段：
render(){
return(
<p>{this.props.txt}</p>
)
}
完整示例：创建父组件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子组件 //定义数据
const person = {
name: 'Tom',
age:
} ReactDOM.render(
//渲染子组件，并向子组件传递name,age属性
<User name={person.name} age={person.age}></User>
, document.getElementById('root'));
创建子组件 :User.js
import React from 'react'; class User extends React.Component{
render(){
return (
// 使用props属性接收父组件传递过来的参数
<div>{this.props.name}，{this.props.age}</div>
);
}
} export default User;
5.兄弟组件传值
兄弟组件之间的传值，是通过父组件做的中转 ，流程为：
**组件A** -- `传值` --> **父组件** -- `传值` --> **组件B**
代码示例：创建Aclis.js 组件,用于提供数据
import React from 'react'; class Acls extends React.Component {
//按钮点击事件，向父组件Pcls.js传值
handleClick(){
this.props.data("hello...React...");
} render(){
return (
<button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
);
}
} export default Acls;
创建父组件 `Pcls.js` 用于中转数据
import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls'; class Pcls extends React.Component {
//构造函数
constructor(){
super();
this.state = {
mess: ''
}
}
//向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
getDatas(data){
this.setState({
mess: data
});
} render(){
return (
<React.Fragment>
Pcls组件中显示按钮并传值：
<Acls data={this.getDatas.bind(this)}></Acls>
<Bcls mess={this.state.mess}></Bcls>
</React.Fragment>
);
}
} export default Pcls;
创建子组件 `Bcls.js` 用于展示从 `Acls.js` 组件中生成的数据
import React from 'react'; class Bcls extends React.Component { render(){
return (
<div>在Bcls组件中展示数据：{this.props.mess}</div>
);
}
} export default Bcls;
