react img标签问题与url和类 [英] React img tag issue with url and class
本文介绍了react img标签问题与url和类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的JSX文件中有以下简单的代码:
I have the following simple react code in my JSX file:
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
DOM中的输出如下:
The output in the DOM is as follows:
<div data-reactid=".0">
<img src="http://placehold.it/400x20undefined1" data-reactid=".0.0">
<span data-reactid=".0.1">
<span data-reactid=".0.1.0">Hello </span>
<span data-reactid=".0.1.1">World</span>
</span>
</div>
我有两个问题:
- 图片网址呈现不正确,呈现为 http://placehold.it/400x20undefined1
- 我的图片上的类消失了
任何想法?
推荐答案
记住,你的img不是一个真正的DOM元素,而是一个javascript表达式。
Remember that your img is not really a DOM element but a javascript expression.
-
这是一个JSX属性表达式。把大括号放在src字符串表达式周围,它会工作。请参见 http://facebook.github.io/react/docs/jsx-in -depth.html#attribute-expressions
在javascript中,class属性是使用className的引用。请参阅本部分中的注释: http://facebook.github.io /react/docs/jsx-in-depth.html#react-composite-components
In javascript, the class attribute is reference using className. See the note in this section: http://facebook.github.io/react/docs/jsx-in-depth.html#react-composite-components
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div><img src={'http://placehold.it/400x20&text=slide1'} alt="boohoo" className="img-responsive"/><span>Hello {this.props.name}</span></div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
这篇关于react img标签问题与url和类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文