在我的 app.js
在常量應用程式中
我回來了
<Display results = {(good,neutral,bad)}></Display>
都是數字
在我的顯示組件中
const Display = ({good,neutral,bad}) => (
引數變為未定義或任何。為什么數字沒有通過。
完整代碼
import { useState } from 'react'
const App = () => {
// save clicks of each button to its own state
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0)
return (
<div>
<h1>give feedback</h1>
<button onClick={() => setGood(good 1)}>Good </button>
<button onClick={() => setNeutral(neutral 1)}>Neutral</button>
<button onClick={() => setBad(bad 1)}>Bad</button>
<h1>Statistics</h1>
<Display results = {(good,neutral,bad)}></Display>
<h1>{good}{ neutral} {bad}</h1>
</div>
)
}
const Display = ({good,neutral,bad}) => (
console.log(good),
<table>
<tr>
<td>good</td>
<td>{good}</td>
</tr>
<tr>
<td>neutral</td>
<td>{neutral}</td>
</tr>
<tr>
<td>bad</td>
<td>{bad}</td>
</tr>
<tr>
<td>all</td>
<td>{good neutral bad}</td>
</tr>
<tr>
<td>average</td>
<td>{(good-bad)/(good neutral bad)}</td>
</tr>
<tr>
<td>positive</td>
<td>{(good)/(good neutral bad)}</td>
</tr>
</table>
)
export default App
uj5u.com熱心網友回復：
你傳遞道具的方式是錯誤的。試試這個
<Display good={good} neutral={neutral} bad={bad}></Display>
uj5u.com熱心網友回復：
Display你不是在解構道具results，而是整個props組件。所以要么改變你使用組件的方式
<Display {...{good, neutral, bad}} />
這是縮寫
<Display good={good} bad={bad} neutral={neutral} />
或者
將 Display 組件更改為解構results
const Display = ({results}) => {
const {good, neutral, bad} = results;
return (
// ...
)
}
以及你如何使用它
<Display results={{good, neutral, bad}} />
uj5u.com熱心網友回復：
你可以改變 到<顯示結果 = {{good:good,neutral:neutral, bad:bad}}>
最后，您可以收到如下結果道具：
const Display = ({results}) => (
console.log(results),
<table>
<tr>
<td>good</td>
<td>{results.good}</td>
</tr>
<tr>
<td>neutral</td>
<td>{results.neutral}</td>
</tr>
<tr>
<td>bad</td>
<td>{resuts.bad}</td>
</tr>
<tr>
<td>all</td>
<td>{good neutral bad}</td>
</tr>
<tr>
<td>average</td>
<td>{(results.good-results.bad)/(results.good neutral results.bad)}</td>
</tr>
<tr>
<td>positive</td>
<td>{(results.good)/(rsults.good results.neutral results.bad)}</td>
</tr>
</table>
)注意：記住不能除0，除法編譯時可能會報錯
uj5u.com熱心網友回復：
你的問題在這里
<Display results = {(good,0,0)}></Display>
它應該是
<Display results={{good, neutral:0, bad:0}} />
或者可能
<Display results={{good, neutral, bad}} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/465342.html
標籤：javascript html 反应