如何阅读反应语法

Posted 2023-02-21

【中文标题】如何阅读反应语法

【英文标题】：How to read react syntax

【发布时间】：2017-11-18 07:20:40

【问题描述】：

如下：

<div style=marginTop:'10%'>

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

【问题讨论】：

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

【参考方案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 元素。