Question

我正在努力学习React。我在使用花括号时遇到了麻烦。大括号的使用使JSX和JS之间产生差异在下面的代码中， Curly Brace 1说＆＃34;现在它是JS＆＃34;。为什么有大括号2？它已经在一个花括号区域内？

var React = require('react');
var ReactDOM = require('react-dom');

var MyCompClass = React.createClass({ // open curly brace 1
  render: function () { // open curly brace 2
    return <h1>Hello</h1>;
  }
});

ReactDOM.render(
    <MyCompClass />, 
    document.getElementById('app')
);

第二个快速问题：

ReactDOM.render(
        <MyCompClass />, 
        document.getElementById('app')
    );

为什么.render（）需要MyComponentClass周围的HTML标记？

感谢您的帮助！

Answer 1

您正在使用object参数调用React.createClass方法。第一个花括号是标准javascript object的语法。在这个对象中有一个名为'render'的属性。这个render属性可以是一个函数，所以第二个花括号是javascript函数语法的范围。

此外，render方法中的HTML标记是您的React组件，这是JSX语法。

因此，以下文档可能会有所帮助：

React Without ES6
Introducing JSX
React Without JSX

编辑：另外，我意识到React道具的使用可能会让你感到困惑。在反应中，使用花括号再次使用道具的语法，但这用于为您的组件提供动态绑定。通过使用此语法，如果您的道具的值发生更改，您的组件将能够更新您的html。以下是此案例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

有关更多详细信息，请查看Component and Props usage的相关React文档。

Answer 2

Curly brace 2 包含render（）函数的正文。

Curly brace 1 ...实际上还包含函数体，函数为React.createClass()。此函数将一个对象作为参数，使用花括号1 创建，包含函数和变量（在这种情况下，此对象仅包含render()方法）。

事实是，在这个例子中，唯一的JSX元素是<h1>Hello</h1>;和<MyCompClass />。它们使用JSX语法，而使用纯JS时，需要createElement()和appendChild() DOM函数。

在React中使用花括号

2 个答案: