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

然后,如果后面有更多的逻辑,就可以顺利地维护代码。

其他回答

注意:在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>
      );

  }
}

React(或JSX)不支持属性值内的变量插值,但你可以把任何JS表达式放在花括号内作为整个属性值,所以这是可行的:

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

然后,如果后面有更多的逻辑,就可以顺利地维护代码。