代码之家 › 专栏 › 技术社区 › Yanshof

创建按钮,文本位于左侧,图像/图标位于右侧的ReactJS

reactjs

Yanshof · 技术社区 · 6 年前

我需要创建一个按钮,在反应图像。我定义代码

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

但问题是

我看到的图像与文本的对齐方式不同我的意思是文字和图像不在同一个高度,我不能让他们看起来很好。
我不确定这是最好的预防措施(我必须以某种方式存储按钮ID和按钮值)

1 回复 | 直到 6 年前

Tom Fenech 6 年前

可以使用flexbox使对齐更容易( align-items 有用-我把它设置为 center )flex容器的子级可以使用 order 属性。

下面是一个使用单个道具的组件的玩具示例 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>