react 有标记绑定语法吗？

Question

我正在学习 React，这就是我的教程所说的将表格绑定到 Article 对象的 javascript 数组的方式：

<table>
<tbody>
{
articles.map(a => 
{
  return <tr>
           <td>
                {a.property1}
           </td>
           <td>
                {a.property2}
           </td>
            </tr>
})
}
</tbody>
</table>

我一直在使用淘汰赛 js，它支持一种看起来更自然的语法，因为它没有所有的花括号和括号，这使得你更容易看到你正在尝试的 HTML 的结构生产：

<table>
<tbody>
<tr data-bind="foreach: a in articles">
  <td>
    {a.property1}
  </td>
  <td>
    {a.property2}
  </td>
</tr>
</tbody>
</table>

React 有类似的声明式语法吗？

Answer 1

JSX 只是 JavaScript 的语法糖。 这个：

<tbody>
{
  articles.map(a => 
  {
  return <tr> ...

被转译为：

React.createElement('tbody', null,
  articles.map(a => {
    return React.createElement('tr', null,
      // <td> elements
    )
  })
)

在将 JavaScript 表达式插入 JSX 时，JSX 中需要括号{} ，以指示后面的内容应该被解析为 JavaScript 而不是 JSX 的类似 HTML 的标记 - 也就是说，没有办法绕过{

<tbody>
{
  articles.map(

为了将文章插入到<tbody>中。

您能做的最好的事情是删除{并return并在.map回调中使用箭头函数的简洁返回：

<table>
    <tbody>
        {
            articles.map(a => <tr>
                <td>
                    {a.property1}
                </td>
                <td>
                    {a.property2}
                </td>
            </tr>
            )
        }
    </tbody>
</table>

React 有争议的主要好处之一（对于已经了解 JS 的新学习者）是它只是 JavaScript ，除了一些关于 JSX 的额外语法规则。 所以没有像foreach: a in articles - 相反，使用了用于循环数组的普通 JavaScript 逻辑， articles.map(a => 。