学习React(13) - 使用props的方法

关于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;

结果如下：
显示出现一个按钮：

然后，当点击按钮时，就出现提示框信息：

如果觉得写的不错，就用点赞来代替五星好评吧！