Добавление HTML-элемента внутрь объекта
Я использую это состояние массива для отображения информации в таблице:
Как видите, мне нужно поместить кнопку копирования в каждую строку таблицы, но я попытался вставить HTML непосредственно в сам объект, но это не удалось:
Что я могу сделать, чтобы эта кнопка копирования отображалась в каждой строке таблицы?
Заранее спасибо.
Я использую MaterialUI DataGrid
Посмотрите этот ответ stackoverflow.com/questions/64331095/… о том, как реализовать пользовательский рендеринг ячеек
добавить образец кода в codeandbox для отладки — это здорово.
Вы можете мне помочь? Я не понял, как это сделать с ответом @uke, вот коды и коробка: codeandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Этот:
renderCell: (ValueFormatterParams) => {
<a href = "#">Oi </a>; // you are missing return statement
}
должно быть:
renderCell: (ValueFormatterParams) => {
return (<a href = "#">Oi </a>);
}
или:
renderCell: (ValueFormatterParams) => ( <a href = "#">Oi </a>)
Обновлено: Получение данных из строки:
copyHanle = (item) => {
console.info(item);
}
//...
render() {
const columns = [
//...
renderCell: (ValueFormatterParams) => {
const {row} = ValueFormatterParams;
return (
<CopyToClipboard
text = {row.name}
onCopy = {() => this.setState({ copied: true })}
>
<button>Copy</button>
</CopyToClipboard>)
}
]
//...
}
См.: https://material-ui.com/components/data-grid/rendering/#render-cell
Я рад помочь.
не могли бы вы помочь мне еще с одной вещью? Я пытаюсь отобразить кнопку в каждой строке, чтобы скопировать никнейм пользователя строки, но у меня проблемы, потому что все кнопки отображаются в каждой строке, как вы можете видеть здесь: codeandbox.io/s /wizardly-worker-t3yzd?file=/src/App.js Я тоже пытался использовать forEach, но это не сработало Заранее спасибо
Конечно, смотрите мою правку. Это то, что вы пытаетесь получить?
Извини. Я отправил неверную ссылку на песочницу. Проверьте это codeandbox.io/s/funny-rgb-0qhhu?file=/src/App.js строка 135. для отладки используйте world gentebra, Elder druid, минимальный уровень 8 наивысший 1000, вы увидите, что он генерирует каждая кнопка строки в каждой ячейке, мне нужно отображать только определенную кнопку в каждой ячейке. прямо сейчас, если у меня есть 50 регистров, в каждой ячейке будет отображаться 50 кнопок копирования, содержащих кнопку каждого регистра.
Вам не нужна функция карты, смотрите редактирование, также из ValueFormatterParams вы можете получить пользовательские данные. Попробуйте console.info(ValueFormatterParams), и вы увидите нужные вам данные.
Большое спасибо за Вашу помощь
Компонент таблицы преобразует значение столбца в строку. Какую библиотеку вы используете для рендеринга таблицы?