React props(JSX)

Question

我在React中实现了一个基本的评级组件，不知何故我做到了这一点

const Rating = ( {text},{value}) => {
return (
   <div className='rating'>
    <span>
        <i className={value>=1?'fas fa-star':value>=0.5?'fas fa-star-half-alt':'far fa-star'}></i>
    </span>
    </div>
)}

而不是这个

const Rating = ( {text,value}) => {
return (
   <div className='rating'>
    <span>
        <i className={value>=1?'fas fa-star':value>=0.5?'fas fa-star-half-alt':'far fa-star'}></i>
    </span>
    </div>
)}

谁能告诉我为什么在第一部分中没有处理这个值？

附注:我在react/javascript领域相对较新，所以如果这是一个非常基本的问题，很抱歉。

Answer 1

这意味着你期望2对象作为参数。

( {text},{value} ) 

这意味着你需要一个单对象作为参数。

({ text, value }) 

当你创建一个组件时，你通常只需要一个对象参数，我们通常称之为props。

const Component = (props) => {}

如果您希望以这种方式使用组件

<Component text="I am text" value="I am value" />

然后你就可以使用({ text，value })来重构道具了。这相当于

const Component = (props) => {
    const { text, value } = props
}

Answer 2

因为这个({text},{value}) != ( {text,value}).

当你这样做的时候，({text,value})就是在破坏道具。