Question

在JSX中，如何从引用的属性值中引用props中的值？

例如：

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

生成的HTML输出为：

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

Answer 1

React（或JSX）不支持在属性值内部进行变量插值，但是您可以将任何JS表达式放在花括号中作为整个属性值，这样就可以了：

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

Answer 2

如果你想使用es6模板文字，你也需要在刻度线周围括号：

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

Answer 3

如果你在和谐中使用JSX，你可以这样做：

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

在这里，您将src的值写为表达式。

Answer 4

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

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

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

{`string ${variable} another string`}

Answer 5

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

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

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

然后，如果您以后有更多逻辑，则可以顺利维护代码。

Answer 6

对于人们来说，寻找答案，以及地图＆＃39;功能和动态数据，这是一个工作示例。

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

这会将网址设为＆＃34; http://examole.com/randomview/images/2/dp_pics/182328.jpg＆＃34; （随机例子）

Answer 7

您可以使用

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

Answer 8

注意：在反应中，您可以将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>
      );

  }
}

Answer 9

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

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

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

9 个答案: