Question

以下内容：

<div style={{marginTop:'10%'}}>

我读这个是因为style是一个包含数组的对象（外部{}）（内部{}）？

Answer 1

在JSX中，所有内容都包含在花括号{}中。当你看到一组{}时，你知道它们里面的是JavaScript。对于样式道具，它接受一个对象。所以你的风格是{marginTop: '10%'}，它包含在JSX {}中。你也可以这样写：

const customStyle = { marginTop: '10%' };

<div style={customStyle}></div>

{}让React知道你使用的是JavaScript而不是字符串。

Answer 2

外部{}表示属性的值是要计算的表达式，而不是静态字符串。（你永远不会在React中使用带有style属性的静态字符串;你可以使用其他属性。）表达式的内容是任何有效的JavaScript表达式;在这种情况下，一个对象初始值设定项定义一个对象，该对象具有一个名为marginTop的属性，其值为'10%'。（这是你在React中设置元素style的方法：通过一个对象。）示例中没有数组。

我建议通过Intro to React tutorial来获得土地。

Answer 3

这里混杂了两种不同的语言。

外语是JSX。它是类似HTML的部分，但编译为Javascript。外部{}是JSX语法的一部分，意思是“里面的内容是Javascript”。

表达式的内部构造一个Javascript对象。该语法还使用括号，包含一组键值对。该对象被解释为一种风格。

在外括号内，您可以使用任何Javascript表达式。所以你可以把你的方法写成：

render() { 
    const style = {marginTop:'10%'};
    return <div style={style}>;
}

这是一个Javascript方法，它返回在JSX中创建的对象，其中包含对在Javascript中创建的style值的引用。

从技术上讲，这是一种语言，JSX是Javascript的超集，但我认为将扩展描述为JSX并将常规部分描述为Javascript是有帮助的。

Answer 4

它被读作一个对象（内部{}），其中包含作为属性传递的一个属性marginTop通过外部{}执行div元素。

如何阅读反应语法

4 个答案: