react 和 redux props 的区别

Question

我有 app.js 和 component.js component.js 在 app.js 在我的还原中，有数和 “数字+1”功能和 “number-1”函数。

当我使用 redux props 时，

export default function Sample2({ props }) {
  return (
    <div>
      <h2>{props.num}</h2>
      <button onClick={props.onClickIncrease}>+</button>
      <button onClick={props.onClickDecrease}>-</button>
    </div>

  );
}

这有效

和

export default function Sample2( props ) {
  return (
    <div>
      <h2>{props.num}</h2>
      <button onClick={props.onClickIncrease}>+</button>
      <button onClick={props.onClickDecrease}>-</button>
    </div>

   
  );
}

不起作用

我的app.js是

<Sample
          num={props.num}
          onClickIncrease={props.onClickIncrease}
          onClickDecrease={props.onClickDecrease}
        />

我做了这样的组件。

在道具上使用 {} 有区别吗？

Answer 1

是的，当然有区别这里是一个小例子，也许它会解释这种情况

const sameFunction1 = ({props}) => {
  console.log(props.num)
}

const sameFunction2 = (props) => {
  console.log(props.num)
}

sameFunction1({
  props: {
      num: 1  // <-------
  },
  num:2 
})

sameFunction2({
  props: {
      num: 1 
  },
  num:2 // <-------
})

说实话，问题不涉及react和redux，问题涉及destructurization.

在第一种情况下我们这样做，在第二种情况下我们不这样做，在第一种情况下我们从对象中提取道具，在第二种情况下我们处理整个对象

换句话说：

const sameFunction1 = ({props}) => {
  console.log(props.num)
}

它等于下面的代码：

const sameFunction1 = (data) => {
  const props = data.props // const {props} = data.props
  console.log(props.num)
}

react 和 redux props 的区别

react and redux props differences

reactjs

redux