조립 반응

이 장에서는 우리가 관리 할 우리의 응용 프로그램을 쉽게 구성 요소를 사용하는 방법을 설명합니다.

! "안녕하세요"다음, 우리는 구성 요소, 구성 요소라는 HelloMessage 출력을 캡슐화 :

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

»시도

분석의 예 :

구성 요소 클래스HelloMessage를 생성 React.createClass 방법.

<HelloMessage /> 구성 요소 클래스와 출력 정보의 인스턴스입니다.

기본 HTML 요소 이름은 소문자로 시작합니다 및 사용자 정의 클래스 이름은 예를 들어, HelloMessage helloMessage을 쓸 수없는, 대문자로 시작 반응한다. 컴포넌트 클래스에 더하여 하나의 최상위 태그를 포함 할 수있는, 또는 다른 설명한다합니다.

우리는 구성 요소에 매개 변수를 전달해야하는 경우 다음과 같이this.props 개체 인스턴스를 사용할 수 있습니다 :

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="w3big" />,
  document.getElementById('example')
);

»시도

this.props.name이름 속성에 의해 위의 예는 얻을 수 있습니다.

당신이 속성을 추가 할 때, 클래스 속성이 htmlFor 기록 될 수 있도록, 클래스 명을 기록 속성을 참고,이 클래스 때문에위한 자바 스크립트 예약어입니다.

복합 구성 요소

우리는 하나의 구성 요소, 분리 점, 즉 서로 다른 기능 구성 요소로 여러 구성 요소를 만들 수 있습니다.

우리가 출력 사이트 이름과 URL 구성 요소를 달성 다음 예제 :

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

React.render(
  <WebSite name="本教程" site=" http://www.w3big.com" />,
  document.getElementById('example')
);

»시도

이름과 링크의 웹 사이트 인스턴스가 해당 정보의 출력에 웹 사이트 이름과 링크 구성 요소에 사용되는 구성 요소의 예.