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

小开

最佳答案

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}`} />

小开

对于寻找w.r.t到“映射”函数和动态数据的答案的People，这里有一个工作示例。

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

这将给出URL为"http://examole.com/randomview/images/2/dp_pics/182328.jpg"(随机示例)

小开

最佳实践是为它添加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>
);


}
}

小开

你可以使用ES6模板字符串，而不是添加变量和字符串! 下面是一个例子:

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

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

{`string ${variable} another string`}

小开

这里是动态类名或道具的最佳选项，只需像我们在Javascript中做的那样做一些连接。

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

小开

你可以使用

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

小开

你可以这样做

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