[javascript] React JSX: Access Props in Quotes


2 Answers

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

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

في 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()} />

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




ملاحظة: عند التفاعل ، يمكنك وضع تعبير 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>
      );

  }
}



Related