關於React的一些知識點,之前的博客已經講了差不多了,現在也就不多說什麼了,就直接上代碼,通過代碼就稍微說一下吧。
在src 文件包裏,創建兩個文件,一個叫做Testparentcomponent.js 文件,另一個叫做 Childcomponent.js 文件。
先是 Testparentcomponent.js 文件代碼展示:
// Testparentcomponent.js 文件
import React, {Component} from 'react'
import Childcomponent from './Childcomponent'
class parentComponent extends Component {
constructor(props) {
super(props)
this.state = {
parentName: "parent"
}
this.greetParent = this.greetParent.bind(this)
}
greetParent(childName) {
// 裏面的不是使用單引號,而是使用 “esc” 按鈕的左下方的 ` 的按鈕
// alert(`Hello ${this.state.parentName}`)
alert(`Hello ${this.state.parentName} from ${childName}` )
}
render() {
return (
<div>
<Childcomponent greetHandler={this.greetParent}/>
</div>
)
}
}
export default parentComponent
接着是展示Childcomponent.js 文件代碼:
// Childcomponent.js 文件
import React from 'react'
function Childcomponent(props) {
return (
<div>
{/* <button onClick={props.greetHandler}>
Greet parent
</button> */}
<button onClick={() => props.greetHandler('child')}>
Greet parent
</button>
</div>
)
}
export default Childcomponent
這就會讓大家覺得奇怪了,有兩個文檔,那麼應該是哪個文檔放在App.js 文件裏呢?
不難發現,Testparentcomponent.js 調用了 Childcompoennt.js 文件,那麼在App.js 文件裏,應該是調用Testparentcomponent.js 文件。
下面是App.js 文件:
// App.js 文件
import React from 'react';
import './App.css';
import Parentcomponent from './Testparentcomponent'
function App() {
return (
<div className="App">
<Parentcomponent />
</div>
);
}
export default App;
結果如下:
顯示出現一個按鈕:
然後,當點擊按鈕時,就出現提示框信息:
如果覺得寫的不錯,就用點贊來代替五星好評吧!