React, useState - 为什么在作为 (props) 传递时无法检索状态值但在传递 ({props}) 时可以检索状态值？

Question

同题！为什么在作为 (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}) 是正确的方法。但是我还是不明白这是怎么回事，有哪位好心人能详细说说吗？

谢谢大家！

Answer 1

那是因为 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

看看解构--->

Answer 2

原因是因为你有一个叫道具的道具。 <Statistics props={clicks} />

所以子组件得到这个作为 props

props = {
  props: clicks
}

所以当你这样使用它时

const comp = props => {
  props.good
}

它坏了，因为道具只有道具调用props

你要做的有点像

<Statistics {...clicks} />

现在在您的统计组件中，您将获得正确的道具

const Statistics = props => {
  console.log(props) // {good: 0, neutral: 0, bad: 0}

}

React, useState - 为什么在作为 (props) 传递时无法检索状态值但在传递 ({props}) 时可以检索状态值？

React, useState - Why can not retrieve the state value when passing as (props) but can when passing ({props})?

javascript

jsx

web

reactjs

react-native