React 中大括号的使用

我正在尝试学习 React。 我在使用花括号时遇到问题。 JSX 和 JS 之间使用大括号的区别 在下面的代码中， 大括号 1 表示“现在是 JS”。 为什么有花括号 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 标记？

感谢您的帮助 ！

您正在使用对象参数调用 React.createClass 方法。第一个大括号是标准语法JavaScript 对象 https://www.w3schools.com/js/js_object_definition.asp。在这个对象中有一个称为“render”的属性。这个渲染属性可以是一个函数，因此第二个大括号是 javascript 函数语法的范围。

另外，渲染方法中的 HTML 标记是 React 组件，这是 JSX 语法。

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

1. 不使用 ES6 进行 React https://facebook.github.io/react/docs/react-without-es6.html
2. 介绍 JSX https://facebook.github.io/react/docs/introducing-jsx.html
3. 不使用 JSX 进行反应 https://facebook.github.io/react/docs/react-without-jsx.html

编辑：另外，我意识到 React props 的使用可能会给你带来困惑。在 React 中，props 的语法再次使用大括号，但这用于为组件提供动态绑定。通过使用此语法，如果 prop 的值发生更改，您的组件将能够更新 html。下面是这个案例的例子：

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

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

有关更详细的信息，请查看相关的 React 文档组件和道具的使用 https://facebook.github.io/react/docs/components-and-props.html.