Как устранить скачок контента при появлении scrollbar'a в SPA?
...Об этих вариантах решения проблемы я уже знаю...
Важно, что бы все оранжевые блоки шли подряд внутри одного родителя (без разбиения их на блоки).
renderProfileData = testingReducer => {
const {
q_age,
q_lang,
q_metric,
q_height,
q_weight,
q_sex
} = testingReducer;
const language = q_lang.value === 1 ? "English" : "Swedish";
const meansurements = q_metric.value === 1 ? "Metric" : "U.S. units";
const sex = q_sex.value === 1 ? "Male" : "Female";
return (
<React.Fragment>
<div className="testing-profile-data">
<span>Language of questions</span>
<span>{language}</span>
</div>
<div className="testing-profile-data">
<span>Measurements</span>
<span>{meansurements}</span>
</div>
<div className="testing-profile-data">
<span>Sex</span>
<span>{sex}</span>
</div>
<div className="testing-profile-data">
<span>Age</span>
<span>{q_age.value}</span>
</div>
<div className="testing-profile-data">
<span>Weight</span>
<span>{q_weight.value}</span>
</div>
<div className="testing-profile-data">
<span>Height</span>
<span>{q_height.value}</span>
</div>
</React.Fragment>
);
};function Button({ type, className, to, href, onClick, children, disabled, color, size = 'md', ...props }: Props) {
const url = to || href;
const isExternal = url && (url.indexOf('://') !== -1 || url.indexOf('//') === 0);
let styledFunction;
let buttonProps = {};
if (url) {
styledFunction = isExternal ? styled.a : styled(Link);
buttonProps = isExternal ? {
href: url,
target: '_blank',
rel: 'nofollow',
} : {
to: url,
};
} else {
styledFunction = styled.button;
}
const Component = getComponent(styledFunction);
return (
<Component
type={type}
colors={getButtonColors(color)}
size={size}
className={className}
disabled={disabled}
onClick={onClick}
{...buttonProps}
{...props}
>
{children}
</Component>
);
}onClick = () => {
this.props.fetchSomeData(this.state.someParam).then(res => {
// do something
});
}[changeGameFavorite](state, { payload: gameId }) {
const games = state.games.map(game => {
if (game && game.id === gameId) {
return { ...game, favorite: !game.favorite };
}
return game;
});
return { ...state, games };
},