javascript - react Prop (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 }) 来重组 Prop 。这相当于

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