在React JSX中访问引号内的道具

2020/10/04 21:21 · javascript ·  · 0评论

在JSX中,如何props从带引号的属性值内部引用值?

例如:

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

产生的HTML输出为:

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

React(或JSX)不支持在属性值内进行变量插值,但是您可以将任何JS表达式放在花括号内作为整个属性值,因此可以使用:

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

如果要使用es6模板文字,则还需要在刻度线周围加上大括号:

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

如果您将JSX与Harmony结合使用,则可以执行以下操作:

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

在这里,您正在编写src表达式的值

您可以使用ES6模板字符串来代替添加变量和字符串!这是一个例子:

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

至于JSX中的所有其他JavaScript组件,请在花括号内使用模板字符串。要“注入”变量,请使用美元符号,然后在花括号中包含要注入的变量。例如:

{`string ${variable} another string`}

最佳做法是为此添加getter方法:

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

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

然后,如果以后有更多逻辑,则可以平稳地维护代码。

对于People,寻找“映射”功能和动态数据的答案,这是一个有效的示例。

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

这样,URL为“ http://examole.com/randomview/images/2/dp_pics/182328.jpg ”(随机示例)

注意:在react中,您可以将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>
      );

  }
}

这是Dynamic className或Props的最佳选择,就像我们在Javascript中那样进行一些串联。

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

您可以使用

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

要么

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

要么

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }
本文地址:http://javascript.askforanswer.com/zaireact-jsxzhongfangwenyinhaoneidedaoju.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!