更改图像onClick与反应

编辑：得到这个工作包装它在一个div。有人知道为什么更改图像onClick与反应

我有我的玉（index.jade）模板这一形象：

img(id='favourite-item')

而这个阵营代码：

var FavouriteItemButton = React.createClass({ 
    getInitialState: function() { 
     return {favourite: false}; 
    }, 
    handleClick: function (event) { 
     this.setState({favourite: !this.state.favourite}); 
    }, 
    render: function() { 
     var icon = this.state.favourite ? 'images/item-active-empty-heart-icon.png' : 'images/item-active-full-heart-icon.png'; 
     return (
      <div onClick={this.handleClick}> 
      <img 
       src={icon} 
       width='22' height='20' 
      /></div> 
     ); 
    } 
});

REACT为渲染图像，但在尺寸：宽= 0，height = 0，像这样：

<img id="favourite-item"> 
    <img src='images/item-active-full-heart-icon.png' width='22' height='20' /> 
</img>

问题：

1）为什么React渲染两个图像？这是因为React适用于DOM元素而不是图像？

2）为什么我的图像没有显示？我个人认为这是因为父图像覆盖了图像内部。

3）React是否适合这个？或者应该像jQuery那样做？

欢迎任何想法。

来源

2016-04-18 DennisTurn

我不认为REACT为渲染图像内的图像，玉渲染外部形象和反应被渲染里面的一个，它的工作原理与外界一个div因为..嗯，这是有效的HTML。 –

谢谢。它现在正在显示，但我的onClick没有开火。你有什么想法，为什么？ – DennisTurn

@DennisTurn：请不要问在同一职位的多个问题。如果你已经解决了你的问题，发表一个答案，说明你做了什么来解决你的问题。如果您遇到新问题，请发布一个描述该问题的新问题。 –

React不会创建两个图像，而是创建一个图像标签并将其用作React图像的包装，因此这是输出valid html的问题，而不是React或Jade的问题之一。

在HTML中，<img>标记没有结束标记。

你得到玉创建<img>标签，但放置反应是图像内的图像：

<img id="favourite-item"> 
    <img src='images/item-active-full-heart-icon.png' width='22' height='20' /> 
</img>

如果你改变了玉模板包装是一个有效的容器，那么它会工作，也大概指定测量单位这样浏览器就不用猜测：

div(id='favourite-item')

会给你：

<div id="favourite-item"> 
    <img src='images/item-active-full-heart-icon.png' width='22px' height='20px' /> 
</div>

来源

2016-04-18 20:15:19

更改图像onClick与反应

回答

相关问题