javascript - ماهو - react ترجمة




React JSX: Access Props in Quotes (4)

في JSX ، كيف يمكنك الرجوع إلى قيمة من props من داخل قيمة سمة مقتبسة؟

فمثلا:

<img className="image" src="images/{this.props.image}" />

ناتج HTML الناتج هو:

<img class="image" src="images/{this.props.image}">

أفضل الممارسات هي إضافة طريقة getter لذلك:

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

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


إذا كنت ترغب في استخدام القيم الحرفية للقالب es6 ، فأنت بحاجة إلى أقواس حول علامات التأشير أيضًا:

<img className="image" src={`images/${this.props.image}`} />

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

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

وهذا يعطي عنوان URL كـ " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (مثال عشوائي)


لا يدعم React (أو JSX) الاستيفاء المتغير داخل قيمة سمة ، ولكن يمكنك وضع أي تعبير JS داخل الأقواس المتعرجة كقيمة السمة بأكملها ، لذلك يعمل هذا:

<img className="image" src={"images/" + this.props.image} />






react-jsx