我创建了一个 ReactJS 组件来在数据表的每一行中显示编辑/删除按钮。
这是我的组件:
import React from 'react';
const iconStyle = {
border:'none',
boxShadow:'none',
backgroundColor:'transparent',
cursor:'pointer'
};
const RowEditButtons = (props) => {
const editButton = props.onEdit ?
<button type="button" className="btn btn-sm btn-secondary" onClick={props.onEdit.bind(null,props.index)} style={iconStyle}>
<img src="img/icon-pencil.svg" />
</button>
: null;
const deleteButton = props.onDelete ?
<button type="button" className="btn btn-sm btn-secondary" onClick={props.onDelete.bind(null,props.index)} style={iconStyle}>
<img src="img/close-o.svg" />
</button>
: null;
return (
<div className="btn-group" role="group" aria-label="Edit buttons" >
{editButton}
{deleteButton}
</div>
);
};
RowEditButtons.propTypes = {
index: React.PropTypes.number,
onEdit: React.PropTypes.func,
onDelete: React.PropTypes.func
};
export default RowEditButtons;
我正在 IE 上进行测试(因为这是公司标准),我注意到按钮有时会出现,有时不会出现。有时它们会显示在某些行上而不显示在其他行上。这是不一致的。使用开发工具查看呈现的 DOM 后,我看到按钮和图像在那里,只有图像具有宽度 =“0”和高度 =“0”。我不确定这里发生了什么,是浏览器、reactjs 还是 bootstrap。
有人知道吗?
最佳答案
我刚刚将内联样式添加到 img 元素,将宽度和高度设置为自动。这似乎解决了问题。
<img style={{width:'auto',height:'auto'}} src="img/icon-pencil.svg" />
关于html - 在 IE 中以零宽度和高度呈现的 reactjs svg 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43328448/