React：使用大括号和省略大括号之间有什么区别吗？

Question

带花括号：

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

vs不带花括号：

<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" />

道具将是这样（所有字符串）：

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

因此，我认为传递布尔值和数字的唯一方法如下：

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

对？

Answer 1

如果没有卷曲，它将是一串对角纹理。卷曲。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评估卷发内的任何内容。