反应道具（JSX）

Question

I was implementing a basic rating component in React and somehow i did this

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>
)}

instead of this

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>
)}

Can anyone tell me why the value is not processed in the first part?

PS I am relatively new in the react/javascript field, so sorry if it's a very basic question.

Answer 1

this means you are expecting 2 objects as arguments.

( {text},{value} ) 

this means you are expecting a single object as argument.

({ text, value }) 

When you create a component, you are normally only expecting one object argument, which we normally call it props.

const Component = (props) => {}

If you are expecting to use the component this way

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

Then you can expect to use ({ text, value }) to restructure the props. Which is equivalent to

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

Answer 2

because this ({text},{value}) != ( {text,value}).

when you do this ({text,value}) , you destructuring props.