Question

如何显示带有文字的图像作为复选框的标签？我正在使用Material UI和React。目前我有这个：

<FormControlLabel
control={
    <Checkbox checked={false} onChange={this.handleChange('')} value={id} key={id} />
}
label={
    <img src={avatar} key={id} className="profile-img" width="40px" height="auto" style={{marginRight: "5px"}} />
}

在label属性中，我想要图像，然后是图像旁边的名称，但是我不知道如何正确地做到这一点。

Answer 1

您可以使用片段将文本也添加到标签中。片段只是一个不会在DOM中显示的空节点，允许您将多个JSX组件彼此并排返回：

<FormControlLabel
    control={
        <Checkbox checked={false} onChange={this.handleChange('')} value={id} key={id} />
    }
    label={
        <>
            <img src={avatar} key={id} className="profile-img" width="40px" height="auto" style={{ marginRight: "5px" }} />
            My text
            {myTextVariable}
        </>
    }
/>

如果您的短毛绒不喜欢它，则可以使用React.Fragment代替：

<FormControlLabel
    control={
        <Checkbox checked={false} onChange={this.handleChange('')} value={id} key={id} />
    }
    label={
        <React.Fragment>
            <img src={avatar} key={id} className="profile-img" width="40px" height="auto" style={{ marginRight: "5px" }} />
            My text
            {myTextVariable}
        </React.Fragment>
    }
/>

使用Material UI在复选框标签中显示图像和文本

1 个答案: