父組件傳遞數(shù)據(jù)給子組件
1 父組件給子組件添加自定義的屬性
2 子組件通過(guò)props屬性來(lái)獲取到父組件傳過(guò)來(lái)的所有數(shù)據(jù)
class Father extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '我愛黎明'
}
}
render() {
return (
<div>
我是父組件：
{this.state.msg}
<Son msg={this.state.msg} name="vivo"></Son>
</div>
)
}
}
// 1 父組件給子組件添加自定義的屬性
// 2 子組件通過(guò)props屬性來(lái)獲取到父組件傳過(guò)來(lái)的所有數(shù)據(jù)
class Son extends React.Component {
// props就有所有父組件傳來(lái)的數(shù)據(jù)
constructor(props) {
super(props)
}
render() {
return (
<div>
<h1>我是子組件</h1>
<h2>{this.props.name}--{this.props.msg}</h2>
</div>
)
}
}
ReactDOM.render(<Father/>, document.getElementById('app'))
子組件傳遞數(shù)據(jù)給父組件
1 父組件提供一個(gè)方法
2 父組件把方法傳遞給子組件
3 子組件通過(guò)props來(lái)接收父組件傳遞過(guò)來(lái)的方法
4 子組件給父組件傳遞數(shù)據(jù)
class Father extends React.Component {
render() {
return (
<div style={{ width: 400, height: 400, backgroundColor: 'pink' }}>
我是父組件
{/* 2 父組件把方法傳遞給子組件 */}
<Son getData={this.getData}></Son>
</div>
)
}
// 1 父組件提供一個(gè)方法
getData(msg) {
console.log(msg)
console.log('getData執(zhí)行')
}
}
class Son extends React.Component {
// 3 子組件通過(guò)props來(lái)接收父組件傳遞過(guò)來(lái)的方法
constructor(props) {
super(props)
this.state = {
msg: '我是子組件的數(shù)據(jù)'
}
}
render() {
return (
<div style={{ width: 200, height: 100, backgroundColor: 'green' }}>
{this.state.msg}
<button onClick={this.sendData}>點(diǎn)擊給父組件傳數(shù)據(jù)</button>
</div>
)
}
sendData = () => {
// 4. 給父組件傳遞數(shù)據(jù)
let {getData} = this.props
getData(this.state.msg)
}
}
ReactDOM.render(<Father/>, document.getElementById('app'))
react children
通過(guò)props.children就能夠獲取組件的子元素
class Model extends React.Component {
render() {
let {title, children} = this.props
// 通過(guò)props.children就能夠獲取到組件的子元素
return (
<div>
<h1>{title}</h1>
<p>{children}</p>
</div>
)
}
}
ReactDOM.render(
<div>
<Model title="提示">是否確認(rèn)要?jiǎng)h除？</Model>
<Model title="MSG">請(qǐng)確認(rèn)是否添加內(nèi)容</Model>
</div>,
document.getElementById('app')
)
