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

IT技术 reactjs coffeescript ruby-on-rails-5

2021-05-25 02:41:10

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

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

他提供了一个与此类似的示例组件（咖啡脚本）：

@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.

无论如何，在研究与此间接相关的另一个错误时，我发现有人建议使用以下内容：

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

2个回答

你可以在没有 JSX 的情况下将咖啡脚本与 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

根据您使用的 React 版本，您可能需要单独包含React-DOM包
解构 ReacDom直接使用 DOM 元素
使用 Coffeescript 的类语法而不是遗留函数。
导出组件的工厂，以便您可以轻松地在另一个组件中使用它：

 Rows = require('./rows')

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

这是最终有效的方法

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没有功能的，或者是没有定义。所以事实证明，每个文档 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测试渲染器/浅层。

第二：

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

yarn add react-dom-factories

如果您遵循我上面的示例，您可能还需要添加create-react-class和prop-types。

最后：

确保您的 coffeescript 文件的扩展名只是 .coffee。如果您使用.js.coffee或者.jsx.coffee您将收到无法找到该组件的错误。

~~我不是 100% 确定这是否有必要，但我也在cjsx-loader寻找解决方案时添加到我的 webpacker 中。它是一个用于 Webpack 的 coffee-react-transform 加载器module。~~

更新：这最后一部分不是必需的。我做了一个新项目，这根本不需要。

其它你可能感兴趣的问题

上一篇使用 React-Context 时对象不可迭代错误下一篇如何将 TSX 转换为 JSX