reactjs - 将 Reactjs 变量传递给图像和链接标签

Question

我使用下面的代码来显示记录。但我目前的问题是我无法按照下面的代码行将 reactjs 值传递给 Image 标签和链接标签。

<img src=/uploads/{item.pic}></img>
<a href="data.php?id={item.link}" tittle="">Next</a>

什么是最好的方法来做到这一点

class App extends React.Component {
  constructor(){
    super() 
      this.state = {
        data: []
      }

  }
  componentDidMount() {
    $.ajax({
       url: "jeck.php",
       type: "GET",
       success: function(data) {

         this.setState({data: data});
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
  }
  render() {
    return (
      <div>
        {this.state.data.map(function(item, key) {
          return (
            <li key={key}>
              {item.name}
              {item.id}
              {item.pic}
              {item.link}
              <img src=/uploads/{item.pic}></img>
              <a href="data.php?id={item.link}" tittle="">Next</a>
            </li>
          );
        })}
     </div>
    );
  }
}

Answer 1

如果您使用的是 es6 环境，则可以使用模板文字。

<img src={`/uploads/${item.pic}`}></img>

如果不是，则可以连接字符串

<img src={'/uploads/' + item.pic}></img>