學習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;

結果如下：
顯示出現一個按鈕：

然後，當點擊按鈕時，就出現提示框信息：

如果覺得寫的不錯，就用點贊來代替五星好評吧！