Хотел бы что-то полезное написать, но фантазия не работает, а если и работает - то понимаешь, что это можно с легкостью воплотить в жизнь на VanillaJS.
VanillaJS === JavaScript; // true
TypeScript !== VanillaJS; // true
JSX !== VanillaJS; // true
export getRoutes = permissions => routes.filer(route => route.permission ? permissions.includes(permission) : true);
export default function SwitchWithRoutes({ routes, checkHasAccess }) {
return (
<Switch>
{routes.map((route, i) => {
if(checkHasAccess(route.permissions) {
return (
<Route
key={i}
exact={route.path === '/'}
path={route.path}
component={route.component}
/>);
}
return null;
})}
</Switch>
);
}
const mapStateToProps = state => ({
checkHasAccess: checkHasAccessSelector(state),
});
export default connect(mapStateToProps)(SwitchWithRoutes);
class MyClass {
state = { ... };
handler = () => { ... };
render() {
const some = 'some';
return <div>{some}</div>;
}
}
Если ты используешь стандартный create-react-app то у тебя итак все пишется на VanillaJS, реакт тут не причем вообще.
acc.message += (!i ? '': '\n') + el.message;
переделать структуру так, чтобы overflow: hidden был у дочернего контейнера, а не у самого slider на котором padding.
Посмотрите как сделано у меня тут https://jsfiddle.net/rockon404/wgry1rv1/
Там текст в элементе с overflow: hidden, а у внешнего контейнера задан padding. Поэтому текст частично скрыт и есть отступ.