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

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}
        </>
    }
/>

如果你的 linter 不喜欢这个，你可以使用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>
    }
/>