javascript – react img标签问题与url和类

我有以下简单的反应代码在我的JSX文件:

/** @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中的输出如下:

<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表达式。

>这是一个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

/** @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);
http://stackoverflow.com/questions/26054512/react-img-tag-issue-with-url-and-class

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – react img标签问题与url和类