和標題一樣！為什么在作為 (props) 傳遞時無法檢索狀態值，而在傳遞 ({props}) 時卻可以檢索到狀態值？
代碼示例：
import React, { useState } from 'react'
const Header = (props) => {
return (
<div>
<h1>{props.text}</h1>
</div>
)
}
const Button = (props) => (
<button onClick={props.handleClick}>
{props.text}
</button>
)
const Statistic = props => ( <div><h2>{props.text}</h2></div>)
const Statistics = ({props}) =>{
const total = props.good props.neutral props.bad
console.log("total", total)
return(
<div></div>
)
}
const App = () => {
// save clicks of each button to its own state
const [clicks, setClicks] = useState({
good: 0, neutral: 0, bad: 0
})
const setClickToValue= newValue => {
setClicks(newValue)
}
return (
<div>
<Header text="Give feedback" />
<Button handleClick={ () => setClickToValue(clicks.good 1) } text="Good" />
<Button handleClick={ () => setClickToValue(clicks.neutral 1) } text="Neutral" />
<Button handleClick={ () => setClickToValue(clicks.bad 1) } text="Bad" />
<Statistic text="Statistics" />
<Statistics props={clicks} />
</div>
)
}
export default App
我花了一個小時才弄清楚傳遞為 ({props}) 是正確的方法。但我仍然不明白發生了什么，有人可以詳細說明嗎？
謝謝各位！
uj5u.com熱心網友回復：
原因是因為你有一個道具呼叫道具。
<Statistics props={clicks} />
所以子組件將其作為道具
props = {
props: clicks
}
所以當你像這樣使用它時
const comp = props => {
props.good
}
它壞了，因為道具只有道具呼叫 props
你必須做的是
<Statistics {...clicks} />
現在在 yow Statistics 組件中，您將獲得正確的道具
const Statistics = props => {
console.log(props) // {good: 0, neutral: 0, bad: 0}
}
uj5u.com熱心網友回復：
那是因為 React 功能組件具有稱為 props 的默認引數，它是一個物件。要訪問 props 物件，我們可以通過 . 或 [] 表示法，例如，props.name
javascript 也作為稱為物件銷毀的功能假設我有物件
let obj = {a:123,b:1243}
// i can directly access the object property by destructuring
let {a} = obj;
console.log(a)
//output 123
看看解構--->
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/347519.html
標籤：javascript 反应 反应原生 网络 jsx