Question

编辑：将此工作包装在div中。有谁知道为什么？

我在我的Jade（index.jade）模板上有这个图像：

img(id='favourite-item')

这个React代码：

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正在渲染图像但是大小：width = 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一样完成？

欢迎任何想法。

Answer 1

React没有创建两个图像，jade正在创建一个图像标记并将其用作React图像的包装器，所以这更像是输出valid html的问题，而不是一个问题用React或Jade。

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

您正在让Jade创建<img>标记，但将反应图像放在该图像中：

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

如果您将Jade模板包装器更改为有效容器，那么它将起作用，也可能指定度量单位，因此浏览器不必猜测：

div(id='favourite-item')

会给你：

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

使用React更改图像onClick

1 个答案: