學習React(9) - props 的用法在class component

上一篇文章，提到如果用JSX格式來用props，應該怎麼用。現在這一篇是寫在class component裏應該如何使用props呢。還是一樣，在src 文件夾裏創建一個Testprops.js文件，代碼如下：

// Testprops.js 文件
import React, {Component} from 'react'

class testprops extends Component {
    render() {
        return ( 
        	// 如果在return裏，爲了保險，都是寫在一個<div>裏面
            <div>
                <h1>
                    Hello {this.props.name}, friend's name {this.props.friendName} 
                </h1> 
                {this.props.children}
            </div>
        )
    }
}

export default testprops;

在App.js 文件裏：

// App.js 文件下
import React from 'react';
import './App.css';
import Testprops from './Testprops';

function App() {
  return (
    <div className="App">
      <Testprops name="AAA" friendName="DDD">
        <p>This is the first children</p>
      </Testprops>

      <Testprops name="BBB" friendName="EEE">
        <button>Action</button>
      </Testprops>
      <Testprops name="CCC" friendName="FFF"/>
    </div>
  );
}

export default App;

結果如下：

---

還有沒有其他種方法來實現這個功能呢？答案是有的

// Testprops.js 文件
import React, {Component} from 'react'

class testprops extends Component {
    render() {
    	// 把這裏修改成這樣
        const {name, friendName, children} = this.props
        // 語法：
        // const {state1, state2, state3,...} = this.state
        return ( 
            <div>
                <h1>
                    Hello {name}, friend's name {friendName} 
                </h1> 
                {children}
            </div>
        )
    }
}

export default testprops;

App.js 文件還是保持一樣，

// App.js 文件下
import React from 'react';
import './App.css';
import Testprops from './Testprops';

function App() {
  return (
    <div className="App">
      <Testprops name="AAA" friendName="DDD">
        <p>This is the first children</p>
      </Testprops>

      <Testprops name="BBB" friendName="EEE">
        <button>Action</button>
      </Testprops>
      <Testprops name="CCC" friendName="FFF"/>
    </div>
  );
}

export default App;

結果還是更上面結果一樣。

如果有哪裏寫的不對，就請指出來吧！
如果寫的不錯的話，就用點個贊來取代五星好評吧！