img 태그 문제를 url 및 클래스로 대응

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>

두 가지 문제가 있습니다.

• 이미지 URL이 잘못 렌더링되어 'http://placehold.it/400x20undefined1''로 렌더링됩니다.
• 내 이미지의 클래스가 사라지다

좋은 생각 있어요?

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

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>
      );
    }
});

언급URL : https://stackoverflow.com/questions/26054512/react-img-tag-issue-with-url-and-class