Отображение изображения и текста в метке флажка с использованием пользовательского интерфейса материала - PullRequest
Новая
       7

Отображение изображения и текста в метке флажка с использованием пользовательского интерфейса материала

0 голосов
/ 12 февраля 2019

Как я могу отобразить изображение с текстом рядом с ним в качестве метки для флажка?Я использую 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 я хочу изображение, а затем имя рядом с ним, но я не могу понять, как это правильно сделать.

1 Ответ

0 голосов
/ 13 февраля 2019

Вы можете использовать фрагмент, чтобы также добавить свой текст на этикетку.Фрагмент - это просто пустой узел, который не будет отображаться в 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>
    }
/>
...