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

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

如果你在 Harmony 中使用 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

对于人们，寻找“地图”功能和动态数据的答案，这里是一个工作示例。

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

这使 URL 为“ http://examole.com/randomview/images/2/dp_pics/182328.jpg ”（随机示例）

Answer 7

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

这是 Dynamic className 或 Props 的最佳选择，只需像我们在 Javascript 中那样做一些连接。

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

Answer 9

您可以使用

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