出于某种原因将组件呈现为字符串

Question

出于某种原因，我的部分 React 组件正在呈现为字符串。

我将 Rails 与 react-rails gem 和 sprockets-coffee-react gem 结合使用以将 JSX 与 Coffeescript 结合使用。

这是代码

show.html.erb

<%= react_component 'ArticleForm', {action: articles_path, 
                                    authenticity_token: form_authenticity_token,
                                    collection_id: @collection.id,
                                    } %>

article_form.js.coffee.cjsx

window.ArticleForm = React.createClass
  getInitialState: ->
    metadata: {}
    url: ''

  handleChange: ->
    console.log('test')

  render: ->
    <form accept-charset="UTF-8" action={this.props.action} method="post">
      <AuthenticityTokenInput authenticity_token={this.props.authenticity_token} />
    </form>

authenticty_token_input.js.coffee.cjsx

window.AuthenticityTokenInput = React.createClass
  render: ->
    <div style={{margin: 0, padding: 0, padding: 'inline'}}>
      <input name="utf8" type="hidden" value="✓">
      <input name="authenticity_token" type="hidden" value={this.props.authenticity_token}>
    </div>

并且输出：

<input name="utf8" type="hidden" value="✓"> <input name="authenticity_token" type="hidden" value=zlZevmHku5ZU+UA998KwmJHAMn94uVkilrBj1iC/A8o=>

出于某种原因，它将两个输入呈现为纯文本而不是实际的 html 标签。

当我检查元素时，这是我得到的：

<form action="/articles" method="post" data-reactid=".0">
    <div style="margin:0;padding:inline;" data-reactid=".0.0">
        <span data-reactid=".0.0.0">&lt;input name="utf8" type="hidden" value="✓"&gt;
&lt;input name="authenticity_token" type="hidden" value=</span>
        <span data-reactid=".0.0.1">zlZevmHku5ZU+UA998KwmJHAMn94uVkilrBj1iC/A8o=</span>
        <span data-reactid=".0.0.2">&gt;</span>
    </div>
</form>

Answer 1

如果您在使用 CJSX 时遇到标签输出为纯文本的情况，通常是因为其中一个内部标签格式不正确。

在你的例子中是 <input> 标签，它应该是自动关闭的。在 CJSX（和 JSX）中，你必须提供一个结束标签，或者让标签自动关闭，例如。 <input />

更正后的 authenticty_token_input.js.coffee.cjsx 看起来像这样：

window.AuthenticityTokenInput = React.createClass
  render: ->
    <div style={{margin: 0, padding: 0, padding: 'inline'}}>
      <input name="utf8" type="hidden" value="✓" />
      <input name="authenticity_token" type="hidden" value={this.props.authenticity_token} />
    </div>

出于某种原因将组件呈现为字符串

React Component rendering to string for some reason

ruby-on-rails

reactjs

react-rails