Передача className в компонент React
Я пытаюсь передать classname в material-ui Button component, но не могу заставить его работать. Ниже мои попытки.
Попытка 1:
attributes.map((attribute, index) => {
const classString = 'classes.button' + index;
console.info(classString)
return (
<Button className = {classString} onClick = {this.handleClick.bind(this, attribute)}>
{attribute}
</Button>
)}
)}
Попытка 2:
attributes.map((attribute, index) => {
const classString = 'classes.button' + index;
console.info(classString)
return (
<Button className = {'${classString}'} onClick = {this.handleClick.bind(this, attribute)}>
{attribute}
</Button>
)}
)}
Я также пробовал пакет npm classnames, но даже он не работает.
Любая помощь будет оценена, спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я предполагаю, что classes - это объект с ключом button. // в примере material-ui они передают classes как props
Немного измените декларацию classString. Убедитесь, что вы передаете объект classes и у него есть ключ с именем button.
attributes.map((attribute, index) => {
const classString = classes.button + `${index}`; // best practice to add string to a number
return (
<Button className = {classString} onClick = {this.handleClick.bind(this, attribute)}>
{attribute}
</Button>
)}
)}
Если вы все еще сталкиваетесь с проблемой, проблема связана с объектом classes. Чтобы проверить это, измените строку const classString = classes.button + $ {index} ; на
const classString = 'random-class';
и проверьте, получает ли кнопка класс random-class
Редактировать:
Поскольку ваш объект classes выглядит примерно так:
{
class1: _class2-something-15443",
class2: ....,
...
}
вам следует соответственно изменить classString.
измените его на:
const classString = classes[`class${index}`];
Еще лучше: const classString = `${classes.button}${index};` . Но я сомневаюсь, что добавление индекса массива в класс css - это вообще правильный подход. Вместо этого это должен быть id, если OP хочет применить css специально для этой кнопки, или это можно сделать иначе, используя только javascript.
Абсолютно. Но пусть внесет ясность в вопрос. Это с передачей свойства className или значения, входящего в свойство className
Да, конечно. Это был просто дополнительный комментарий, так что если OP не подумал об этом, он мог подумать об использовании другого решения. Это не лишает его шанса прояснить проблему, поскольку ваш ответ дает ему необходимые подсказки.
Спасибо за ответ. Когда я меняю его на classes.button + '$ {index}', я получаю предупреждение с надписью «неожиданное строковое выражение шаблона», но оно по-прежнему не работает. И когда я меняю его на 'const classString =' classes.button '', который является исходным классом, кнопка все еще не получает класс, только когда я удаляю кавычки, кнопка получает его.
Я считал, что неправильно набрал обратные галочки, и это больше не дает мне предупреждения. Однако кнопка по-прежнему не получает класс. Возможно ли, что это связано с тем, что я использую withStyles?
const classString = 'random-class'; пробовали?
Я попробовал const classString = classes.button, и он работает, но const classString = 'classes.button' по-прежнему не работает.
Когда я регистрирую classes, я заметил одну вещь: я получаю объект, похожий на Object {class1: _class2-something-15443", etc}, я понятия не имею, что это означает, но я думаю, что это связано?
Material-UI реализует CSS-in-js и использует компонент более высокого порядка material-ui / styles 'withStyles'. Взгляните на демонстрацию кнопки на сайте, она очень полезна https://material-ui-next.com/demos/buttons/
с ограничением, что
yourVariableNameдолжен быть строкой илиnull/undefined.