如何读取反应语法

Question

在下面：

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

我看这是风格是一个对象（外{}）包含数组（内{}）？

Answer 1

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

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

Answer 2

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

Answer 3

在JSX中，所有东西都被大括号包裹起来{}。当你看到一组{}时，那么你知道它们里面的是JavaScript。对于样式道具，它接受一个对象。所以你的风格是{marginTop: '10%'}，它被包装在JSX {}。你也可以把它写成这样：

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

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

的{}只是让它再反应知道你正在使用的不是字符串的JavaScript。

Answer 4

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

外部语言是JSX。这是类似HTML的部分，但编译为Javascript。外部{}是JSX语法的一部分，意思是“JavaScript里面是什么”。

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

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

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

这是一个JavaScript方法，它返回JSX创建的对象，包含在JavaScript中创建的style值的参考。

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