menu есть в спеке html, хоть и deprecated вроде, а так - тебе ничто не мешает юзать незарезервированные названия.Vue.config.isReservedTag = function(isReservedTag){
const allowedTags = ['menu'];
return function(tag) {
if(allowedTags.includes(tag)) return false;
return isReservedTag.call(this, tag);
}
}(Vue.config.isReservedTag);
const Foo = ({ dispatch }) => {
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default connect()(Foo);const Foo = () => {
const dispatch = useDispatch();
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default Foo;const Foo = ({ value }) => {
return (
<Bar value={value} />
);
};
const mapStateToProps = state => ({
value: state.value,
});
export default connect(mapStateToProps)(Foo);const Foo = () => {
const value = useSelector(state => state.value);
return (
<Bar value={value} />
);
};
export default Foo;const valueSelector = state => state.value;
const Foo = () => {
const { dispatch, getState, subscribe } = useStore();
const value = valueSelector(getState());
useEffect(() => subscribe(console.log), []);
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} value={value} />
);
};
export default Foo;
foo.x = foo = {n: 2};foo.x = (foo = {n: 2});{ n: 2 }.let foo = {};
const bar = foo;
foo.x = (foo = {n: 2});
console.log(foo.x === undefined); // true
console.log(bar); // { x: { n: 2 } }
console.log(bar.x === foo); // truefoo.x = - присваивание свойства конкретному объекту. На момент вызова в нашем примере это {}.foo = - присваивание значения самому идентификатору foo. Это может быть примитив, ссылка на объект или функцию. В нашем случае это объект { n: 2 }.
calc(100vw - 100%) можно вычислить ширину скроллбара (а если он не отображается, то будет 0). Идея: при помощи отрицательного margin-right увеличить ширину <html> на эту ширину. При этом появляется горизонтальная полоса прокрутки — ее скрываем.html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
А если у нас есть две совсем одинаковые кнопки, которые отличаются лишь цветом + находятся в разных компонентах?
Как наиболее правильно с точки зрения good practice назвать имена классов?
class=" component-root <component-name>-component-root "<style scoped>
.button {
color: var(--text-color, green)
}
</style><button-component style="--text-color: blue"/> 