Создание обратной ссылки истории и использование моего существующего компонента ссылки
У меня есть определенный общий компонент ссылки (атом, я использую атомарный дизайн для структурирования своего приложения React), который либо возвращает просто <span> с заголовком и значком стрелки, либо, когда у него есть url, он возвращает react-router-dom <Link>.
Я использую react-router-dom v5.
import React from 'react';
import { Link } from 'react-router-dom';
import { Arrow} from 'app/icons';
import { Props } from './MyLink.types';
const MyLink = ({ variant = 'iconRight', text, url }: Props) => {
const renderLinkBody = () => {
return (
<React.Fragment>
<span css = {styles.label}>{text}</span>
<Arrow />
</React.Fragment>
);
};
return url !== undefined ? (
<Link to = {url} title = {text} >
{renderLinkBody()}
</Link>
) : (
<span>{renderLinkBody()}</span>
);
};
export default MyLink;
Теперь я хочу использовать этот компонент для создания кнопки «Назад» (поведение аналогично кнопке «Назад» в браузере).
Является ли это чистым подходом к передаче реквизита (функции) onClick от родителя к дочернему элементу, например:
const history = useHistory();
<MyLink text = "My title" variant = "iconLeft" onClick = {history.goBack} />
а затем немного настроить компонент MyLink:
return url !== undefined || onClick ? (
<Link to = {url} title = {text} onClick = {onClick} >
{renderLinkBody()}
</Link>
) : (
<span>{renderLinkBody()}</span>
);
Ответы 1
Я думаю, что этот подход неплох. При присоединении обработчика onClick к компоненту Link вам, вероятно, потребуется предотвратить поведение ссылки по умолчанию. Вам также нужно будет предоставить действительную опору to компоненту Link при использовании обработчика кликов.
Пример:
const MyLink = ({ variant = "iconRight", onClick, text, url }) => {
const clickHandler = e => {
if (onClick) {
e.preventDefault();
onClick();
}
};
const renderLinkBody = () => {
return (
<>
<span css = {styles.label}>{text}</span>
<Arrow />
</>
);
};
return url !== undefined || onClick ? (
<Link to = {url || "/"} title = {text} onClick = {clickHandler} >
{renderLinkBody()}
</Link>
) : (
<span>{renderLinkBody()}</span>
);
};
Из-за проблемы с действием onClick и Link вы можете вместо этого сделать навигацию «назад» кнопкой и провести рефакторинг MyLink для условного отображения кнопки, ссылки или диапазона, в зависимости от потребностей.