When to surround props with curly braces in React Native?

Question

In the official tutorial, this code shows up:

    <TextInput
      style={{height: 40}}
      placeholder="Type here to translate!"
      onChangeText={(text) => this.setState({text})}
    />

Why do we surround height with curly braces but not placeholder ?

Answer 1

You're surrounding height with curly braces because you're passing javascript to the style and onChangeText props. Strings can be passed literally where as javascript needs to be surrounded by curly braces. It's part of the JSX syntax

Answer 2

Height是JavaScript对象的属性，该对象将传递给option ， 占位符是TextView组件的选项。

Answer 3

placeholder="Type here to translate!"

and

placeholder={'Type here to translate!'}

are equivalent. You can also write it like this, to visually separate it better:

placeholder={
  'Type here to translate!'
}

Knowing that, you can pass almost anything to react props, like an object:

style={
  {height: 40}
}

Which, written inline, results in what you encountered:

style={{height: 40}}