关于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;
结果如下:
显示出现一个按钮:
然后,当点击按钮时,就出现提示框信息:
如果觉得写的不错,就用点赞来代替五星好评吧!