javascript - react : is there a different between using curly brackets and omitting them?

Question

用大括号:

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

与没有大括号的对比:

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

同样的问题与“ref”相关:

带有大括号(来自 React 的文档)，可通过 this._input 访问:

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

与不带大括号的对比，可通过 this.refs.commander 访问:

<div ref="commander"> ...

我还注意到所有内容都以字符串形式出现。为此:

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

Prop 将是这个(所有字符串):

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

所以我想传递 bool 值和数字的唯一方法如下:

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

对吗？

Answer 1

如果没有 curl ，它将是一串对 Angular 线纹理。带 curl 。 React 将尝试评估它并找到一个字符串..最终结果是一样的。只是你通过告诉 React 来评估它来采取更长的步骤。

而第二个例子:

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

所以是的，在 react 中，<div ref={} />这将告诉 React 评估 curl 内部的任何内容。