javascript شرح - React JSX:Access Props in Quotes




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

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

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

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

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

فمثلا:

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

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

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

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

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

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

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

إذا كنت تستخدم JSX مع Harmony ، فيمكنك القيام بذلك:

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

هنا تكتب قيمة src كتعبير.


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

class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}

Image.onload () ستعمل في كثير من الأحيان.

لاستخدامها ، ستحتاج إلى التأكد من ربط معالج الأحداث قبل تعيين السمة src.

روابط ذات علاقة:

مثال للاستخدام:

<html>
<head>
<title>Image onload()</title>
</head>
<body>

<img src="#" alt="This image is going to load" id="sologo"/>

<script type="text/javascript">
window.onload = function () {

    var logo = document.getElementById('sologo');

    logo.onload = function () {
        alert ("The image has loaded!");        
    };

    setTimeout(function(){
        logo.src = 'http://.com/Content/Img/-logo-250.png';         
    }, 5000);
};
</script>
</body>
</html>




javascript reactjs react-jsx