學習React(8) - props的用法在JSX格式

這篇都是用JSX格式來寫的，如果有哪裏有錯誤，就請指出來吧！
先上代碼，然後再根據代碼來講解一下。還是一樣，在src 文件包裏，創建一個文件，博主就命名爲Testprops.js了

// Testprops.js 文件
import React from 'react'

// 博主認爲props就是一個參數，只是大家已經習慣用這個props來做參數
// 博主也試瞭如果用其他名字做爲參數，比如說 pro， 用pro.name 也是能顯示結果的
const testprops = (props) => {
    console.log(props)
    // 必須得用 { } 來把調用的屬性括起來，不然就不能解析了。如果沒用用括號括起來，那麼React
    // 會認爲是一個text, 我們就得向React請求來評估JSX expression.
    // 因爲props 是一個對象，對象裏面包含了屬性和值
    return <h1>Hello {props.name}</h1>
}

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"/>
      <Testprops name="BBB"/>
      <Testprops name="CCC"/>
    </div>
  );
}

export default App;

輸出的結果是：

---

上面是介紹只有一個屬性的情況，下面介紹多了一個屬性，會是什麼樣子呢：

還是用剛纔的文件：

// Testprops.js 文件
import React from 'react'

// 博主認爲props就是一個參數，只是大家已經習慣用這個props來做參數
// 博主也試瞭如果用其他名字做爲參數，比如說 pro， 用pro.name 也是能顯示結果的
const testprops = (props) => {
    console.log(props)
    // 必須得用 { } 來把調用的屬性括起來，不然就不能解析了。如果沒用用括號括起來，那麼React
    // 會認爲是一個text, 我們就得向React請求來評估JSX expression.
    // 因爲props 是一個對象，對象裏面包含了屬性和值
    return <h1>Hello {props.name}, friend's name {props.friendName}</h1>
}

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"/>
       <Testprops name="BBB" friendName="EEE"/>
       <Testprops name="CCC" friendName="FFF"/>
    </div>
  );
}

export default App;

結果是：

---

或許有人會想到，能不能在App.js 文件裏的Testprops tag裏包含其他內容呢，答案是可以的，那就直接上代碼吧：

// 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 文件裏應該如何寫呢：

// Testprops.js 文件
import React from 'react'

const testprops = (props) => {
    console.log(props)
    return (
    	// 必須放在一個<div> 裏面
        <div>
            <h1>
                Hello {props.name}, friend's name {props.friendName}
            </h1>
            {props.children}
        </div>
    )
}

export default testprops;

結果如下：

---

還有沒有其他方法來實現這個props的用法呢？答案是肯定的

// Testprops.js 文件
import React from 'react'

const testprops = (props) => {
    const {name, friendName, children} = props
    return (
    	// 必須放在一個<div> 裏面
        <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;

結果還是一樣的。

覺得寫的不錯，就用點個贊來取代五星好評吧！