Я не знал, какое название я должен отображать для этой проблемы.
У меня есть компонент с именем userRow
, который я хочу вызвать для другого компонента с именем users
, чтобы отобразить данные на материале. Таблица пользовательского интерфейса:
userRow:
export default function UserRow( props, {name, details}) {
const style = styles();
return (
<Fragment>
<ListItem>
<ListItemIcon >
<PeopleIcon className={style.color}/>
</ListItemIcon>
<ListItemText className={style.text}>{props.userName}</ListItemText>
</ListItem>
<Link to={`/users/${props.userDetails}`}>
<ListItemIcon >
<ListAltIcon className={style.iconColor}/>
</ListItemIcon>
</Link>
</Fragment>
)
}
users:
export default function User({ data }) {
const userList = data.map((row) => {
return {user: row.user, details: row.action_type};
});
const [state] = React.useState({
users: [...userList]
});
return (
<div>
<MaterialTable
icons={tableIcons}
title={<h1 className={style.title}>Users</h1>}
columns={[
{
title: "Name",
field: "name",
render: rowData => (
<UserRow userName={rowData.user} />
)
},
{
title: "Details",
field: "details",
render: rowData => (
<UserRow userDetails={rowData.details} />
)
},
]}
data={state.users}
options={{
search: true
}}
/>
</div>
)
}
Чего я хочу добиться, так это вызвать один раз компонент userRow в таблице material-ui и отобразить данные, как и в первом столбце, будут иметь значок, за которым следует имя, а во втором столбце будет просто значок, представляющий собой ссылку.
Что теперь происходит с моим кодом, так это то, что значок переходит к двум столбцы.
Токовый выход:
Правильный вывод: