web-dev-qa-db-fra.com

React Problème de balise img avec url et class

J'ai le code de réaction simple suivant dans mon fichier 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);

La sortie dans le DOM est la suivante:

<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>

J'ai deux problèmes avec ça:

Des idées?

javascriptcssreactjs
38
Serge van den Oever

N'oubliez pas que votre img n'est pas vraiment un élément du DOM mais une expression javascript.

  1. C'est une expression d'attribut JSX. Placez des accolades autour de l'expression de chaîne src et cela fonctionnera. Voir http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

  2. En javascript, l'attribut class est une référence utilisant className. Voir la note dans cette 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);
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