javascript - React: is there a different between using curly brackets and omitting them? - Stack Overflow

admin管理员组

文章数量:1294167

With curly brackets:

<div theBestProp={"diagonal-texture"}> ...

vs without curly brackets:

<div theBestProp="diagonal-texture"> ...

Same question is relevant for the "ref" prop:

With curly brackets (from React's docs), accessible through this._input:

<div ref={(c) => this._input = c} ...

vs without curly brackets, accessible through this.refsmander:

<div ref="mander"> ...

I've also noticed that everything es out as strings. For this:

<PriceOption id="1" yes="true" price="free" audience="for individuals" plan="Starter" />

The props will be this (all strings):

{
        "id": "1",
        "yes": "true",
        "price": "free", 
        "audience": "for individuals", 
        "plan": "Starter"
    }

So I guess only way to pass booleans and numbers is the following:

 <PriceOption id={1} yes={true} price="free" audience="for individuals" plan="Starter" />

right?

With curly brackets:

<div theBestProp={"diagonal-texture"}> ...

vs without curly brackets:

<div theBestProp="diagonal-texture"> ...

Same question is relevant for the "ref" prop:

With curly brackets (from React's docs), accessible through this._input:

<div ref={(c) => this._input = c} ...

vs without curly brackets, accessible through this.refs.mander:

<div ref="mander"> ...

I've also noticed that everything es out as strings. For this:

<PriceOption id="1" yes="true" price="free" audience="for individuals" plan="Starter" />

The props will be this (all strings):

{
        "id": "1",
        "yes": "true",
        "price": "free", 
        "audience": "for individuals", 
        "plan": "Starter"
    }

So I guess only way to pass booleans and numbers is the following:

 <PriceOption id={1} yes={true} price="free" audience="for individuals" plan="Starter" />

right?

• javascript
• reactjs

Share Follow edited Sep 5, 2019 at 15:27 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked Sep 13, 2016 at 17:40 GuyGuy 13.3k1717 gold badges8888 silver badges129129 bronze badges 1

• well, yes.. it might help to think that PriceOption = {id: 1, price: "free"}, that it is PriceOption is an object with property. (it's called props for a reason) – vdj4y Commented Sep 13, 2016 at 18:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Without the curly it will be a string of diagonal-texture. With curly. React will try to evaluate it and find a string.. The end result is the same. Just that you take longer steps by telling react to evaluate it.

while the second example:

<div ref={(c) => this._input = c} 
// react will run the function inside ref, 
// the arrow function always return something, that's js not react
// this is javascript ES6, not react,  

// the function above is the same as: 
<div ref= { (c) => {                   // arrow function returns a closure
                return this._input = c // the closure is returning this._input
             }) 
}

so yeah, in react, <div ref={} /> this will tell react to evaluate whatever inside the curly.

In React JSX syntax, inside of curly braces, Javascript will be evaluated. As the documentation https://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions says,

To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces ({}) instead of quotes ("").

In your first example, the expression "diagonal-texture" evaluates to the same thing as the string "diagonal-texture". Not so for the expression in the second example.

本文标签： javascriptReact is there a different between using curly brackets and omitting themStack Overflow