时间戳

首页 > 解决方案 > React 按钮与带有道具的图像

html - React 按钮与带有道具的图像

问题描述

现在学习反应，需要用不同的图像做一些类似的按钮。我的组件：

export default class Button extends Component {
render() {
    return (

    <button className="header_btn"></button>
    )
}

}

如何使用道具将图像设置为此按钮？保存在本地存储中的图像

标签： htmlreactjsimagereact-propsreact-component

解决方案

嗨，请检查这个例子：这里我将 text 和 imageUrl 作为道具传递。

import React from "react";

export default class Button extends React.Component {
    render() {
        return (
            <button className="header_btn">
                <img height="15px" width="15px" src={this.props.imageUrl} />
                {this.props.text}
            </button>
        )
    }
}

您应该在 App.js 或任何其他组件中使用 Button 组件，如下所示：

<Button text="Click" imageUrl="https://www.tutorialspoint.com/latest/inter-process-communication.png" />

推荐阅读