رد فعل التجمع

هذا الفصل سوف نناقش كيفية استخدام المكونات لجعل تطبيق لدينا أسهل لإدارة.

المقبل، ونحن تغليف الناتج مكون مكون يسمى HelloMessage "مرحبا العالم!"

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

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

محاولة »

أمثلة التحليل:

طريقةReact.createClass لتوليد HelloMessageالطبقةالمكون.

<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، وذلك لأن الطبقة وعلى الكلمات جافا سكريبت محفوظة.

مكونات المركبة

يمكننا خلق مكونات متعددة في مكون واحد، وهي عناصر وظيفية مختلفة من نقطة الانفصال.

الأمثلة التالية حققنا اسم وعنوان مكونات الموقع الإخراج:

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

محاولة »

أمثلة من المكونات المستخدمة في المكونات اسم الموقع ورابط لإخراج المعلومات ذات الصلة، التي لديها سبيل المثال الموقع من اسم ورابط.