出于某种原因,我的React组件的部分呈现为字符串 .
我正在使用带有 react-rails
gem和 sprockets-coffee-react
gem的Rails将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"><input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value=</span>
<span data-reactid=".0.0.1">zlZevmHku5ZU+UA998KwmJHAMn94uVkilrBj1iC/A8o=</span>
<span data-reactid=".0.0.2">></span>
</div>
</form>
1 回答
如果在使用CJSX时遇到以纯文本形式输出的标签,通常原因是其中一个内部标签格式不正确 .
在你的情况下,它是
<input>
标签,应该是自动关闭 . 在CJSX(和JSX)中,您必须提供结束标记,或者使标记自行关闭,例如 .<input />
更正后的
authenticty_token_input.js.coffee.cjsx
将如下所示: