React JSX：在报价中访问道具

作者: 哎？小查查
发布时间: 2025-01-02 10:07:12 (1月前)
转自：

9 条回复

0#
回复此人
庸人自扰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是Dynamic className或Props的最佳选项，只需像在Javascript中那样进行一些连接。 </p> <pre> <code> className={ "badge " + (this.props.value ? "badge-primary " : "badge-danger ") + " m-4" } </code> </pre> </DIV>

编辑
1#
回复此人
句号了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果要使用es6模板文字，则还需要在刻度线周围添加大括号： </p> <pre> <code> <img className="image" src={`images/${this.props.image}`} /> </code> </pre> </DIV>

编辑
2#
回复此人
Mystery☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> React（或JSX）不支持在属性值内部进行变量插值，但是您可以将任何JS表达式放在花括号中作为整个属性值，因此这适用于： </p> <pre class="lang-html prettyprint-override"> <code> <img className="image" src={"images/" + this.props.image} /> </code> </pre> </DIV>

编辑
3#
回复此人
誓言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 注意：在反应中，您可以将javascript表达式放在花括号中。我们可以在此示例中使用此属性。 <BR/> 注意：看一下下面的例子： </p> <pre> <code> 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> ); } } </code> </pre> </DIV>

编辑
4#
回复此人
仙风道骨刘憨憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于People，寻找w.r.t的答案来“映射”函数和动态数据，这是一个工作示例。 </p> <pre> <code> <img src={"http://examole.com/randomview/images" + each_actor['logo']} /> </code> </pre> <P> 这会将URL设为“ <a href="http://examole.com/randomview/images/2/dp_pics/182328.jpg" rel="nofollow"> http://examole.com/randomview/images/2/dp_pics/182328.jpg </A> “（随机例子） </p> </DIV>

编辑
5#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你在和谐中使用JSX，你可以这样做： </p> <pre> <code> <img className="image" src={`images/${this.props.image}`} /> </code> </pre> <P> 在这里你写的是值 <code> src </code> 作为一种表达。 </p> </DIV>

编辑
6#
回复此人
无思 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用ES6模板字符串，而不是添加变量和字符串！这是一个例子： </p> <pre> <code> <img className="image" src={`images/${this.props.image}`} /> </code> </pre> <P> 对于JSX中的所有其他JavaScript组件，请在花括号内使用模板字符串。要“注入”变量，请使用美元符号，然后使用包含您要注入的变量的花括号。例如： </p> <pre> <code> {`string ${variable} another string`} </code> </pre> </DIV>

编辑
7#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 最佳做法是为此添加getter方法： </p> <pre> <code> getImageURI() { return "images/" + this.props.image; } <img className="image" src={this.getImageURI()} /> </code> </pre> <P> 然后，如果稍后有更多逻辑，则可以平滑地维护代码。 </p> </DIV>

编辑

登录后才能参与评论