Reactjs

Question

我正在根据日期和路径动态创建音频源。

这是我的工作代码：

var cdrdata2 =  this.props.cdrdata.map((data,index)=>{
 return(
   <tr key = {index} style={{display:'table',width:'100%',backgroundColor:'white'}}>
    <td width = "11.3%" >{`${data.startDate}`}</td> //12-09-2020
    <td width = "9.4%">{`${data.cdr_recording_file_path}`} // monitor/auto-1589470814-367-7865290090.wav
    <button onClick={this.playAudio}>
      <span>Play</span>
    </button>
    <audio className="audio-element">
      <source src="http://localhost/cdr/phone_cdr/`${data.startDate}`}/{`${data.cdr_recording_file_path}`}"></source>
    </audio>
    </td>
  </tr>  
    
 )

预期输出：

http://localhost/cdr/phone_cdr/12-09-2020/monitor/auto-1589470814-367-7865290090.wav

实际输出：

http://localhost/cdr/phone_cdr/%60$%7Bdata.startDate%7D%60%7D/%7B%60$%7Bdata.cdr_recording_file_path%7D%60%7D 404 (Not Found)

有人可以纠正我吗？提前致谢。

Answer 1

您错误地使用了模板文字。正确的形式是：

<source src={`http://localhost/cdr/phone_cdr/${data.startDate}/${data.cdr_recording_file_path}`}></source>

Reactjs - 无法连接音频源中的变量

Reactjs - unable to concatenate variables in audio source

string-concatenation

react-bootstrap