web-dev-qa-db-ja.com

React urlおよびクラスに関するimgタグの問題

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>

私には2つの問題があります：

何か案は？

javascriptcssreactjs
38
Serge van den Oever

Imgは実際にはDOM要素ではなく、javascript式であることを忘れないでください。

  1. これはJSX属性式です。 src文字列式を中括弧で囲むと機能します。 http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions を参照してください

  2. JavaScriptでは、クラス属性は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);
57
rowbare
var Hello = React.createClass({
    render: function() {
      return (
        <div className="divClass">
           <img src={this.props.url} alt={`${this.props.title}'s picture`}  className="img-responsive" />
           <span>Hello {this.props.name}</span>
        </div>
      );
    }
});
0
kadzielawa konrad