时间戳

首页 > 解决方案 > 在reactjs上创建带有左侧文本和右侧的图像/图标的按钮

reactjs - 在reactjs上创建带有左侧文本和右侧的图像/图标的按钮

问题描述

我需要在反应上创建带有图像的按钮。我定义代码

 <button id='a' value='value1' >
    <img="image.png" align="right|middle"/>
    "myButton"
 </button>

但问题是

  1. 我看到图像与文本的对齐方式不同我的意思是文本和图像不在同一个高度，我不能让 tham 看起来不错
  2. 我不确定这是最好的做法 - （我必须以某种方式存储按钮 ID 和按钮值）

标签： reactjs

解决方案

您可以使用 flexbox 使对齐更容易（align-items很有用 - 这里我将其设置为center）。弹性容器的子级可以使用该order属性更改它们出现的顺序。

下面是一个带有单个 prop 的组件的玩具示例align，它确定图像是在文本之前还是之后。

const Button = ({ align }) => (
  <button className="my-button">
    <img className={align} src="http://via.placeholder.com/50x50" />
    click me
  </button>
)

ReactDOM.render(<div>
  <Button />
  <Button align="right" />
</div>, document.getElementById("root"))
.my-button {
  display: flex;
  align-items: center;
}

.right {
  order: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读