如何在React with Coffeescript中呈现HTML标签？ [英] How do you render HTML tags in React with Coffeescript?

问题描述

我目前正在学习ReactJS以及如何将Ruby on Rails作为其后端，因此，如果我做出愚蠢的假设，请您道歉。

我紧接着是一个教程，其中作者使用Coffeescript而不是ES6来处理他的ReactJS代码。

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

  @Rows = React.createClass 
 render-> 
 React.DOM.div 
 className：'行'
 React.DOM.h1 
 className：'标题'
'行'
  

这有两个错误。第一个与 React.createClass 有关，我发现它已被弃用，不再可用。相反，我使用的是 createReactClass 。好。但是现在， React.DOM.h1 给出了一个错误，提示 Uncaught TypeError：无法读取未定义的属性'h1'，我使用的其他任何HTML标签都一样。我认为这是由于 createReactClass 没有提供以前由 React.createClass 提供的必要功能。

无论如何，在研究与该问题间接相关的另一个错误时，我发现有人建议使用类似的东西 ：

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

因此，切断 React.DOM 部分。这给出了另一种类型的错误，即：未捕获的ReferenceError：未定义div 。再次，我假设这是由于对 React.createClass 的更改所致。

是否可以将React与CoffeeScript一起使用，这样我就可以这样使用它：

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

无需打开和关闭HTML标记，并且没有 React.DOM ？

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

谢谢！

更新

我仍然取得了一些进步，尽管我仍然遇到错误。我尝试了以下操作：

  import从'react'导入React 
从'react-dom'
 import ReactDom {div， h1，p} = ReactDom 
 
类行扩展React.Component 
渲染：-> 
 h1 
 className：'col-md-12'
'行'
 
导出默认行Rows 
  

这将产生以下错误：未捕获的TypeError：h1不是函数。

解决方案

终于可以用了

  React = require（'react'） 
 PropTypes = require（'prop-types'）
 ReactDom = require（'react-dom-factories'）
 createReactClass = require（'create-react-class'）
 {div，h1} = ReactDom 
 
行= createReactClass 
渲染：-> 
 div 
 className：'col-md-12'
 h1 
 className：'title'
'Rows'
 
导出默认行
  

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

首先：

  ReactDom = require（'react-dom-factories'）
  

这是我所缺少的那个。我收到 div 和 h1 不是函数或未定义的错误。因此事实证明，根据文档 React.DOM 现在可以作为 react-dom-factories ：

< blockquote>

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。

第二：

如果其他人遇到此错误，并且出现错误，提示找不到模块 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的咖啡反应转换加载程序模块。

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

I'm currently learning ReactJS and how to work with Ruby on Rails as its backend, so I apologize if I'm making dumb assumptions, feel free to scold me.

I'm following a tutorial where the author is using Coffeescript instead of ES6 to handle his ReactJS code.

He provides an example component similar to this (coffeescript):

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

This has two errors. The first one pertains to React.createClass which I found out has been deprecated and no longer works. Instead I'm using createReactClass. Good. But now, React.DOM.h1 gives an error saying Uncaught TypeError: Cannot read property 'h1' of undefined, same for whichever other HTML tag I use. I assume it's due to createReactClass not providing the necessary functionality previously provided by React.createClass.

Anyway, while researching for another error indirectly related to this, I found someone suggesting to use something like this:

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

So, cutting off the React.DOM part. This gives another type of error, saying: Uncaught ReferenceError: div is not defined. Again, I'm assuming it's due to the change to React.createClass.

Is there a way to use React with CoffeeScript, such that I could use it like this:

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

without having to open and close HTML tags, and without React.DOM?

I don't know if it's possible at all, or if it ever worked, or even if there're many ways to achieve something with similar results. I'm just curious to know if there's a way to do it like this before I dive deeper onto React.

Thanks!

Update

I've made some progress, though I'm still getting an error. I tried the following:

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

This gives the following error: Uncaught TypeError: h1 is not a function.

解决方案

Here's what finally worked

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

So I've been using React 16 and it's incredible how many things have changed in the last 6 months. I'm TOTALLY new to React, so I had absolutely no idea how this worked, but I managed to use the code above without errors.

First:

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

This is the one I was missing. I was getting errors that div and h1 weren't functions, or weren't defined. So it turns out that per the documentation React.DOM is now available as react-dom-factories:

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow.

Second:

If anyone else runs onto this and you get errors that say Cannot find module "react-dom-factories", it means you have to add them to your webpacker with this:

yarn add react-dom-factories

You may also have to add create-react-class and prop-types, if you're following my example above.

Lastly:

Be sure the extension of your coffeescript file is simply .coffee. If you use .js.coffee or .jsx.coffee you'll get errors that the component cannot be found.

I'm not 100% sure if this is necessary, but I also added cjsx-loader to my webpacker when I was searching for a solution. It's a coffee-react-transform loader module for Webpack.

UPDATE: This last part wasn't necessary. I made a new project and this wasn't required at all.

这篇关于如何在React with Coffeescript中呈现HTML标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！