如何在 React with Coffeescript 中渲染 HTML 标签？

Posted 2023-03-03

技术标签:

【中文标题】如何在 React with Coffeescript 中渲染 HTML 标签？【英文标题】：How do you render HTML tags in React with Coffeescript? 【发布时间】：2018-05-07 23:05:06 【问题描述】：

我目前正在学习 ReactJS 以及如何使用 Ruby on Rails 作为其后端，所以如果我做出愚蠢的假设，我深表歉意，请随时责骂我。

我正在关注作者使用 Coffeescript 而不是 ES6 来处理他的 ReactJS 代码的教程。

他提供了一个与此类似的示例组件（coffeescript）：

@Rows = React.createClass
  render ->
    React.DOM.div
      className: 'rows'
      React.DOM.h1
        className: 'title'
        'Rows'

这有两个错误。第一个属于React.createClass，我发现它已被弃用，不再有效。相反，我使用的是createReactClass。好的。但是现在，React.DOM.h1 给出了一个错误，说 Uncaught TypeError: Cannot read property 'h1' of undefined，对于我使用的任何其他 html 标记都是一样的。我认为这是由于createReactClass 没有提供React.createClass 之前提供的必要功能。

无论如何，在研究与此间接相关的另一个错误时，I found someone suggesting to use something like this：

@Rows = React.createClass
  render ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

所以，切断React.DOM 部分。这给出了另一种类型的错误，即：Uncaught ReferenceError: div is not defined。同样，我假设这是由于更改为 React.createClass。

有没有办法将 React 与 CoffeeScript 一起使用，这样我就可以像这样使用它：

@Rows = createReactClass
  render ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

无需打开和关闭 HTML 标签，也无需React.DOM?

我不知道这是否可能，或者它是否曾经奏效，或者即使有很多方法可以实现类似结果的目标。在我深入研究 React 之前，我只是想知道是否有办法做到这一点。

谢谢！

更新

我已经取得了一些进展，但我仍然遇到错误。我尝试了以下方法：

import React from 'react'
import ReactDom from 'react-dom'
div, h1, p = ReactDom

class Rows extends React.Component
  render: ->
    h1
      className: 'col-md-12'
      'Rows'
  
export default Rows

这会产生以下错误：Uncaught TypeError: h1 is not a function。

【问题讨论】：

官方文档为您提供所需信息coffeescript.org/v2/#jsx 除非我遗漏了什么，否则他们只提到 XML 元素，这些元素必须用开始和结束标记括起来。我的问题是关于在我的第三个代码 sn-p 中使用它们（没有结束标签，只有缩进，coffeescript 样式）。要使用类似 jsx 的语法编写，请参阅 ***.com/questions/61615873/… 【参考方案1】：

你可以在没有 JSX 的情况下将 coffeescript 与 React 一起使用。我认为它使代码更简洁：

React = require('react')
ReactDOM = require('react-dom')
div, h1 = ReactDom


class Rows extends React.Component

  render: ->
    div
      className: 'rows'
      h1
        className: 'title'
        'Rows'

module.exports = React.createFactory Rows

ReacDom

 Rows = require('./rows')

 class OtherComponent extends React.Component
   .
   .
   .
   render: ->
     div
       className: 'container'
       Rows()

【讨论】：

这正是我想做的！现在，请原谅我的菜鸟问题，我知道require 没有定义。我能错过什么？我可以运行 JSX 格式的“标准”组件（当然，使用不同的代码），所以我认为问题不在我的 application.js 上。我更新了我的问题，在您提供的帮助下取得了一些进展。我仍然收到错误，但我想我越来越接近了。【参考方案2】：

终于成功了

React = require('react')
PropTypes = require('prop-types')
ReactDom = require('react-dom-factories')
createReactClass = require('create-react-class')
div, h1 = ReactDom

Rows = createReactClass
  render: ->
    div
      className: 'col-md-12'
      h1
        className: 'title'
        'Rows'

export default Rows

所以我一直在使用 React 16，令人难以置信的是在过去 6 个月中发生了多少变化。我对 React 完全陌生，所以我完全不知道它是如何工作的，但我设法使用上面的代码没有错误。

第一：

ReactDom = require('react-dom-factories')

这是我错过的那个。我收到div 和h1 不是函数或未定义的错误。所以事实证明per the documentation React.DOM 现在可以作为react-dom-factories 使用：

15.x 中引入的弃用已从核心中删除包裹。 React.createClass 现在可以作为 create-react-class 使用， React.PropTypes 作为 prop-types，React.DOM 作为 react-dom-factories， react-addons-test-utils 作为 react-dom/test-utils 和浅渲染器作为 react-test-renderer/shallow。

第二：

如果其他人遇到此问题并且您收到Cannot find module "react-dom-factories" 的错误消息，则意味着您必须将它们添加到您的 webpacker 中：