javascript شرح - ما هو الفرق بين الدولة والدعائم في React؟




ماهو ترجمة (13)

كنت أشاهد دورة Pluralsight على رد الفعل وذكر المدرب أن الدعائم لا ينبغي تغييرها. أنا الآن قراءة مقال (uberVU / رد-دليل) على الدعائم مقابل الدولة وتقول

تؤدي كل من التغييرات في الدعائم والدولة إلى تحديث التطبيق.

في وقت لاحق في المادة تقول:

الدعائم (اختصار للمواقع) هي تكوين مكون ، خياراتها إذا سمحتم. وردت من فوق وغير قابل للتغيير.

  • لذلك يمكن أن تتغير الدعائم ولكن يجب أن تكون غير قابلة للتغيير؟
  • متى يجب استخدام الدعائم ومتى يجب عليك استخدام الدولة؟
  • إذا كانت لديك بيانات يحتاجها مكون React ، فهل يجب أن يتم تمريرها عبر الدعائم أو الإعداد في مكون getInitialState عبر getInitialState ؟

Answers

في الإجابة على السؤال الأولي حول الدعائم التي لا يمكن تعديلها ، يقال أنها غير قابلة للتغيير بقدر ما يتعلق الأمر المكون الطفل ولكن قابلة للتغيير في الوالد.


هذه هي وجهة نظري الحالية فيما يتعلق بالتفسير بين الدولة والدعائم

  1. الدولة هي مثل المتغير المحلي الخاص بك داخل المكون الخاص بك. يمكنك التعامل مع قيمة الحالة باستخدام حالة تعيين. يمكنك بعد ذلك تمرير قيمة الحالة إلى مكون طفلك على سبيل المثال.

  2. الدعائم هي القيمة التي تقع بالضبط داخل مخزن redux الخاص بك ، وهذا في الواقع يأتي من الحالة التي نشأت من المخفض. يجب أن يتم توصيل المكون الخاص بك إلى redux للحصول على القيمة من الدعائم. يمكنك أيضًا تمرير قيمة الدعائم الخاصة بك إلى مكون طفلك


الدعائم (اختصارًا لـ "الخصائص") والدولة هي كائنات جافا سكريبت بسيطة. في حين أن كلاهما يحتوي على معلومات تؤثر على ناتج العرض ، إلا أنهما مختلفان في طريقة واحدة مهمة: تمرير الدعائم إلى المكون (مشابه لمعلمات الوظيفة) بينما يتم إدارة الحالة داخل المكون (مشابهة للمتغيرات المعلن عنها داخل الدالة).

إذاً ، الدولة ببساطة تقتصر على مكونك الحالي ولكن يمكن تمرير الدعائم إلى أي مكون ترغب فيه ... يمكنك تمرير حالة المكون الحالي كدعم للمكونات الأخرى ...

أيضا في React لدينا مكونات عديمة الجنسية التي لديها فقط الدعائم وليس الحالة الداخلية ...

يوضح المثال أدناه كيفية عملها في تطبيقك:

الوالد (المكون الكامل للدولة):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

الطفل (مكون بدون حالة):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

وترتبط الدعائم والدولة. غالبًا ما تصبح حالة مكون واحد الدعائم للمكون الفرعي. يتم تمرير React.createElement() إلى الطفل داخل طريقة تقديم الأصل كوسيطة ثانية إلى React.createElement() أو ، إذا كنت تستخدم JSX ، فإن سمات العلامات الأكثر شيوعًا.

<MyChild name={this.state.childsName} />

تصبح قيمة حالة parent's الخاصة بـ childsName هي this.props.name . من وجهة نظر الطفل ، اسم الدعم غير قابل للتغيير. إذا احتاج الأمر إلى تغيير ، فيجب على الوالد فقط تغيير حالته الداخلية:

this.setState({ childsName: 'New name' });

و React سوف تنتشر على الطفل من أجلك. سؤال المتابعة الطبيعي هو: ماذا لو كان الطفل بحاجة إلى تغيير اسمه؟ يتم ذلك عادةً من خلال أحداث الطفل وعمليات رد الاتصال الرئيسية. قد يعرض الطفل حدثًا يسمى ، على سبيل المثال ، onNameChanged . ثم يقوم الوالد بالاشتراك في الحدث بتمرير معالج رد اتصال.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

سيقوم الطفل بتمرير الاسم الجديد المطلوب كوسيطة لاستدعاء الحدث عن طريق الاتصال ، على سبيل المثال ، this.props.onNameChanged('New name') ، this.props.onNameChanged('New name') الأصل الاسم في معالج الحدث لتحديث حالته.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

الدعائم مقابل ملخص الدولة أحب أفضل هنا: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md تلميح قبعة كبيرة لأولئك الرجال. فيما يلي نسخة منقحة من تلك الصفحة:

الدعائم مقابل الدولة

tl؛ dr إذا كان العنصر يحتاج إلى تغيير إحدى سماته في وقت ما ، يجب أن تكون هذه السمة جزءًا من حالته ، وإلا يجب أن يكون مجرد دعامة لهذا المكون.

الدعائم

الدعائم (اختصار الخصائص) هي تكوين المكون. يتم استلامها من أعلاه وغير قابل للتغيير بقدر ما يتعلق الأمر مكون تلقيها. يتعذر على المكون تغيير الدعامات الخاصة به ، ولكنه مسؤول عن تجميع الدعائم الخاصة بمكوناته الفرعية. لا يلزم أن تكون الدعائم عبارة عن بيانات فقط - فقد يتم تمرير وظائف رد الاتصال في شكل دعائم.

حالة

الولاية هي بنية بيانات تبدأ بقيمة افتراضية عند تركيب مكون. قد يتم تحويره عبر الوقت ، غالبًا نتيجة لأحداث المستخدم.

عنصر يدير حالته داخليًا. إلى جانب وضع الدولة الأولية ، ليس لديها أعمال تافه مع حالة أطفالها. قد تصوِّر الحالة على أنها خاصة لهذا المكون.

تغيير الدعائم والدولة

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No
  • لاحظ أن القيم الأولية للولائم والحالة المستلمة من الآباء تتجاوز القيم الافتراضية المحددة داخل المكون.

يجب أن يكون هذا المكون دولة؟

الدولة اختيارية. نظرًا لأن الحالة تزيد من التعقيد وتقلل من القدرة على التنبؤ ، فمن المفضل وجود مكون بدون حالة. على الرغم من أنه من الواضح أنك لا تستطيع الاستغناء عن الدولة في تطبيق تفاعلي ، يجب أن تتفادى وجود العديد من المكونات المهمة.

أنواع المكونات

عديمة الدعوى مكون فقط الدعائم ، لا الدولة. لا يوجد الكثير مما يحدث بجانب وظيفة التقديم (). منطقهم يدور حول الدعائم التي يتلقونها. هذا يجعلها سهلة للغاية لمتابعة ، واختبار.

مكون رسمي كلا الدعائم والدولة. يتم استخدام هذه عندما يجب أن يحتفظ المكون الخاص بك بعض الدولة. هذا هو مكان جيد للاتصال بين العميل والخادم (XHR ، ومآخذ الشبكة ، وما إلى ذلك) ، ومعالجة البيانات والاستجابة لأحداث المستخدم. يجب أن يتم تغليف هذا النوع من الخدمات اللوجستية في عدد معتدل من مكونات Stateful ، بينما يجب أن يتحرك كل منطق المرئيات والتنسيق في اتجاه مجرى إلى العديد من المكونات عديمة الحالة.

مصادر


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


أساسا ، والدعائم والدولة بطريقتين يمكن للمكون معرفة ما وكيف لتقديم. أي جزء من حالة التطبيق ينتمي إلى الحالة وأيها إلى بعض المتاجر ذات المستوى الأعلى ، يرتبط بشكل أكبر بتصميم تطبيقك ، من كيفية عمل React. إن أبسط طريقة لاتخاذ قرار ، المنظمة البحرية الدولية ، هو التفكير ، ما إذا كانت هذه البيانات معينة مفيدة للتطبيق ككل ، أو أنها بعض المعلومات المحلية. من المهم أيضًا عدم تكرار الحالة ، لذلك إذا كان من الممكن حساب بعض البيانات من الدعائم ، فيجب أن يتم حسابها من الدعائم.

على سبيل المثال ، لنفترض أن لديك بعض التحكم في القائمة المنسدلة (الذي يختار HTML القياسي لتحديد التصميم المخصص) ، والتي يمكن أ) اختيار بعض القيمة من القائمة ، و ب) أن يتم فتحها أو إغلاقها (أي ، قائمة الخيارات المعروضة أو المخفية). لنفترض الآن أن تطبيقك يعرض قائمة بعناصر من نوع ما ومن فلتر عناصر التحكم المنسدلة لإدخالات القائمة. بعد ذلك ، من الأفضل تمرير قيمة الفلتر النشطة كدعم ، والحفاظ على حالة فتح / إغلاق محلية. ولجعله فعالاً ، ستقوم بتمرير معالج onChange من المكون الأصلي ، والذي سيُطلق عليه عنصر المنسدلة الداخلي وإرسال معلومات محدثة (مرشح جديد محدد) إلى المتجر على الفور. من ناحية أخرى ، يمكن أن تظل الحالة المفتوحة / المغلقة داخل عنصر القائمة المنسدلة ، لأن بقية التطبيق لا يهتم حقًا إذا تم فتح التحكم ، حتى يقوم المستخدم بتغيير قيمته بالفعل.

لا تعمل التعليمة البرمجية التالية تمامًا ، بل تحتاج إلى css والتعامل مع أحداث clickdown / blur / change المنسدلة ، ولكني أردت الحفاظ على الحد الأدنى من المثال. آمل أن يساعد على فهم الفرق.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

state - هي خاصية خاصة قابلة للتغيير تحتوي على بيانات مكون. يحتوي على القيمة الافتراضية عند تركيب مكون.

الدعائم - هي خاصية خاصة غير قابلة للتغيير من الطبيعة وتستخدم في حالة مرور القيمة من الوالد إلى الطفل. الدعائم هي مجرد قناة communation بين المكونات ، تتحرك دائما من أعلى (الأم) إلى buttom (الطفل).

أدناه مثال كامل على دمج الدولة والدعائم: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

للاتصال بين الوالدين والطفل ، ببساطة تمرير الدعائم.

استخدم الحالة لتخزين البيانات التي تحتاجها صفحتك الحالية في عرض وحدة التحكم.

استخدم الدعائم لتمرير معالجات الأحداث والبيانات إلى مكونات طفلك.

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

الدعائم

  • هي غير قابلة للتغيير
    • والذي يتيح لك إجراء مراجعة سريعة للمراجع
  • تُستخدم لتمرير البيانات من وحدة التحكم في العرض
    • مكون المستوى الأعلى الخاص بك
  • لديك أداء أفضل
    • استخدم هذا لتمرير البيانات إلى مكونات تابعة

حالة

  • ينبغي أن تدار في جهاز تحكم العرض الخاص بك
    • مكون المستوى الأعلى الخاص بك
  • هو قابل للتغيير
  • لديه أداء أسوأ
  • لا يمكن الوصول إليها من المكونات الفرعية
    • تمريرها مع الدعائم بدلا من ذلك

للتواصل بين عنصرين لا يوجد بينهما علاقة بين الوالدين والطفل ، يمكنك إعداد نظام الحدث العالمي الخاص بك. اشترك في الأحداث في componentDidMount () ، إلغاء الاشتراك في componentWillUnmount () ، واستدعاء setState () عندما تتلقى حدثًا. نمط التدفق هي واحدة من الطرق الممكنة لترتيب هذا. - https://facebook.github.io/react/tips/communicate-between-components.html

ما مكونات يجب أن يكون لديك دولة؟

يجب أن تأخذ معظم مكوناتك ببساطة بعض البيانات من الدعائم وتجعلها. ومع ذلك ، في بعض الأحيان تحتاج إلى الاستجابة لإدخال المستخدم أو طلب الخادم أو مرور الوقت. لهذا تستخدم الدولة.

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

النمط الشائع هو إنشاء العديد من المكونات عديمة الحالة التي تقوم فقط بجمع البيانات ، ولها مكونات حتمية فوقها في التسلسل الهرمي الذي يمرر حالتها إلى أبنائها عبر الدعائم. يقوم العنصر الحنيف بتغليف كل منطق التفاعل ، بينما تهتم المكونات عديمة الحالة بتقديم البيانات بطريقة تعريفية. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

ماذا يجب أن تذهب في الدولة؟

يجب أن تحتوي الولاية على بيانات قد يتغير بها معالجي أحداث المكون لتشغيل تحديث واجهة المستخدم. في التطبيقات الحقيقية ، تميل هذه البيانات إلى أن تكون صغيرة جدًا و JSON-serializable. عند بناء عنصر مؤثر ، فكر في الحد الأدنى من التمثيل الممكن لحالتها ، ولا تخزن سوى تلك الخصائص في هذه الدولة. داخل render () ببساطة حساب أي معلومات أخرى تحتاج إليها استناداً إلى هذه الحالة. ستجد أن التفكير في التطبيقات وكتابتها بهذه الطريقة يميل إلى الوصول إلى التطبيق الأكثر صحة ، بما أن إضافة قيم مكررة أو محسوبة إلى الحالة يعني أنك تحتاج إلى الاحتفاظ بها بشكل متزامن بشكل صريح بدلاً من الاعتماد على تفاعلها الحسابي لك. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state


بشكل عام ، حالة مكون واحد (الأصل) هو سند المكون التابع.

  1. تكمن الحالة داخل المكون حيث يتم تمرير الدعائم من الوالد إلى الطفل.
  2. الدعائم عموما غير قابل للتغيير.

    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                name : "John",
            }
        }
        render() {
            return (
                <Child name={this.state.name}>
            )
        }
    }
    
    class Child extends React.Component {
        constructor() {
            super();
        }
    
        render() {
            return(
                {this.props.name} 
            )
        }
    }
    

في الكود السابق ، لدينا فئة أصل (أصل) والتي تحمل اسمها كحالة لها والتي يتم تمريرها إلى المكون الفرعي (فئة الطفل) كدعم والمكون الفرعي يجعلها تستخدم {this.props.name}


الدعائم ببساطة هي الاختزال عن العقارات. الدعائم هي كيف تتحدث المكونات مع بعضها البعض. إذا كنت على دراية بـ React فعليك معرفة أن الدعائم تتدفق لأسفل من المكون الرئيسي.

هناك أيضًا الحالة التي يمكنك فيها استخدام الدعامات الافتراضية بحيث يتم تعيين الدعائم حتى إذا لم يقم المكون الأساسي بتمرير الدعائم.

هذا هو السبب في أن الناس يشيرون إلى React على أنها تحتوي على تدفق بيانات أحادي الاتجاه. يأخذ هذا الأمر بعضًا من التساؤل ، وسأحاول على الأرجح تدوين ذلك في وقت لاحق ، ولكن الآن تذكر فقط: تتدفق البيانات من الوالد إلى الطفل. الدعائم غير قابلة للتغيير (كلمة خيالية لا تتغير)

لذلك نحن سعداء. المكونات تتلقى البيانات من الأم. كل الفرز ، أليس كذلك؟

كذلك ليس تماما. ماذا يحدث عندما يتلقى عنصر البيانات من شخص آخر غير الوالدين؟ ماذا لو قام المستخدم بإدخال البيانات مباشرة إلى المكون؟

حسنا ، هذا هو السبب في أن لدينا دولة.

حالة

لا ينبغي أن يتغير الدعائم ، لذلك خطوات الدولة. عادة لا يكون للمكونات حالة ويتم الإشارة إليها باعتبارها عديمة الحالة. يعرف المكون الذي يستخدم الحالة باسم stateful. لا تتردد في إسقاط هذا الشيء الصغير في الحفلات ومشاهدة الناس بعيدًا عنك.

لذلك يتم استخدام الحالة بحيث يمكن لمكون أن يتتبع المعلومات بين أي عرض يجريه. عند تعيينState فإنه يقوم بتحديث كائن الحالة ثم re-renders المكون. هذا رائع للغاية لأن هذا يعني أن React يهتم بالعمل الشاق وبسرعة مذهلة.

كمثال بسيط على الحالة ، هنا مقتطف من شريط البحث (يستحق التحقق من هذه الدورة التدريبية إذا كنت تريد معرفة المزيد عن React)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

ملخص

تقوم الدعائم والدولة بأشياء مشابهة ولكن يتم استخدامها بطرق مختلفة. قد تكون غالبية مكوناتك عديمة الحالة.

تستخدم الدعائم لتمرير البيانات من الوالد إلى الطفل أو عن طريق المكون نفسه. هم غير قابل للتغيير ، وبالتالي لن يتم تغييرها.

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


معظم الأجوبة مربكة إلى حد ما توضيح. من الصعب جدا أن نفهم ونفهم. يمكنك فهم ذلك من خلال ربطها بـ Plain JS.

بكلمات بسيطة ،

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

سهل JS

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

React JS Equivalent

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

من ناحية أخرى ، فإن الدعائم تجعل المكونات قابلة لإعادة الاستخدام عن طريق إعطاء المكونات القدرة على استقبال البيانات من المكون الرئيسي في شكل الدعائم.

سهل JS

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');

React JS

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

الاعتمادات: https://medium.com/@manojsinghnegi

المقالة Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21


.دعم()

.prop( propertyName )
propertyName
Type: String
The name of the property to get.

تحصل الدالة .prop () على قيمة الخاصية للعنصر الأول فقط في المجموعة المتطابقة. تقوم بإرجاع قيمة غير محددة لخاصية لم يتم تعيينها ، أو إذا كانت المجموعة المطابقة لا تحتوي على عناصر. للحصول على قيمة لكل عنصر على حدة ، استخدم بنية looping مثل jQuery's .each () أو .map ().

<html>
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>

</body>
</html>

.attr ()

.attr( attributeName )
attributeName
Type: String
The name of the attribute to get.

تحصل الدالة .attr () على قيمة السمة للعنصر الأول فقط في المجموعة المتطابقة. للحصول على قيمة لكل عنصر على حدة ، استخدم بنية looping مثل jQuery's .each () أو .map ().

استخدام طريقة .attr () jQuery للحصول على قيمة سمة عنصر له ميزتين رئيسيتين:

الملاءمة: يمكن الاتصال به مباشرة على كائن jQuery وتقييده بأساليب jQuery أخرى. التناسق عبر المتصفحات: يتم الإبلاغ عن قيم بعض السمات بشكل غير متسق عبر المتصفحات ، وحتى عبر إصدارات متصفح واحد. يقلل الأسلوب .attr () حالات عدم التناسق هذه.

<html>
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>

The title of the emphasis is:<div></div>

<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>

</body>
</html>




javascript reactjs