如何阅读反应语法答案

【问题标题】：How to read react syntax如何阅读反应语法
【发布时间】：2017-11-18 07:20:40
【问题描述】：

如下：

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

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

【问题讨论】：

React.js inline style best practices的可能重复

标签： reactjs

【解决方案1】：

在 JSX 中，所有内容都包含在花括号 {} 中。当您看到一组{} 时，您就知道其中的内容是JavaScript。对于 style 属性，它接受一个对象。所以你的风格是{marginTop: '10%'}，它被包裹在JSX {}中。你也可以这样写：

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

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

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

【讨论】：

【解决方案2】：

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

我建议通过Intro to React tutorial 了解情况。

【讨论】：

【解决方案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 会很有帮助。

【讨论】：

【解决方案4】：

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

【讨论】：