ตอบสนองต่อการชุมนุม

บทนี้เราจะหารือเกี่ยวกับวิธีการใช้ส่วนประกอบที่จะทำให้โปรแกรมของเราง่ายต่อการจัดการ

ต่อไปเราจะเอาท์พุทแค็ปซูลเป็นองค์ประกอบส่วนประกอบที่เรียกว่า HelloMessage "Hello World!":

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

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

ลอง»

ตัวอย่างการวิเคราะห์:

วิธีReact.createClass สำหรับการสร้าง HelloMessageระดับส่วนประกอบ

<HelloMessage /> ตัวอย่างของการเรียนและการส่งออกข้อมูลส่วนประกอบ

โปรดทราบว่าชื่อองค์ประกอบ HTML พื้นเมืองเริ่มต้นด้วยตัวอักษรตัวพิมพ์เล็กและกำหนดเอง React ชื่อชั้นเริ่มต้นด้วยอักษรตัวใหญ่เช่นไม่สามารถเขียน 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 ที่จะได้รับ

ทราบว่าเมื่อคุณเพิ่มแอตทริบิวต์ชั้นแอตทริบิวต์ที่จะเขียน className สำหรับคุณสมบัติที่จะเขียน htmlFor นี้เป็นเพราะชั้นเรียนและสำหรับ JavaScript คำสงวน

ส่วนประกอบคอมโพสิต

เราสามารถสร้างส่วนประกอบหลายเป็นองค์ประกอบหนึ่งคือส่วนประกอบการทำงานที่แตกต่างกันของจุดแยก

ตัวอย่างต่อไปนี้เราประสบความสำเร็จชื่อและ 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')
);

ลอง»

ตัวอย่างของส่วนประกอบที่ใช้ในชื่อเว็บไซต์และการเชื่อมโยงส่วนประกอบในการส่งออกของข้อมูลที่สอดคล้องกันที่มีเช่นเว็บไซต์ชื่อและการเชื่อมโยง