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.
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
}
because this ({text},{value}) != ( {text,value}).
when you do this ({text,value})
, you destructuring props.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.