react 有标记绑定语法吗？答案

【问题标题】：Does react have a markup binding syntax?react 有标记绑定语法吗？
【发布时间】：2021-06-05 14:49:09
【问题描述】：

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

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

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

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

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

【问题讨论】：

vue-js 的语法类似敲除

标签： reactjs binding

【解决方案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 的标记 - 也就是说，没有办法绕过 @987654324 @在

<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 =>。

【讨论】：