（React）组件间传值

前言

有了自定义组件，当然也会有组件间的传值

一、父组件向子组件传值

父组件向子组件传值的时候，使用属性传递的方式；

1.Class组件

• 组件代码

import React, { Component } from "react";
import "./App.css";
// 组件内部，默认有一个属性对象props，它包含了父组件传递的所有属性
class App extends Component {
  render() {
    return <div className="App">{this.props.title}</div>;
  }
}
export default App;

• 使用代码

ReactDOM.render(
 // 可直接使用 '[属性名]=[value]' 的方式，直接传值
  <App title="zhangsan"></App>,
  document.getElementById('root')
);

2.函数组件

• 组件代码

import "./App.css";
// props是父组件传递的属性对象，里面包含了所有的属性
function App(props) {
  return <div className="App">Hi：{props.title}</div>;
}
export default App;

• 使用代码

ReactDOM.render(
 // 可直接使用 '[属性名]=[value]' 的方式，直接传值
  <App title="zhangsan"></App>,
  document.getElementById('root')
);