Могу ли я создавать компоненты в стиле React на основе классов?
Я только начал изучать использование стилизованных компонентов для веб-приложения JavaScript React, и мне интересно, можно ли использовать стилизованные компоненты на основе классов. Например:
Функционал (работает):
import styled from 'styled-components';
const Header = styled.header`
color: blue;
`;
export default Header;
.
.
.
(in another file)
import React, {Component} from 'react';
import Header from './Header';
class App extends Component {
render() {
return (
<Header>
This is my header.
</Header>
);
}
}
На основе классов (мне было бы интересно, можно ли что-то подобное сделать - не работает ... цвет не применяется к моему заголовку):
import React, {Component} from 'react';
import styled from 'styled-components';
class Header extends Component {
render() {
return (
<header>
Hi there. Test.
</header>
)};
}
export default styled(Header)`
color: blue;
`;
.
.
.
(in another file)
import React, {Component} from 'react';
import Header from './Header';
class App extends Component {
render() {
return (
</Header>
);
}
}
Возможно ли что-то подобное?
Ответы 1
Да, это можно сделать, вам просто нужно передать опору className элементу JSX, который вы хотите иметь класс стилизованного компонента, и на самом деле вы можете передать любые другие реквизиты, так как стилизованные компоненты передают все реквизиты в его упакованный компонент.
import React, {Component} from 'react';
import styled from 'styled-components';
class Header extends Component {
render() {
return (
<header className = {this.props.className}>
Hi there here is another prop {this.props.anotherProp}
</header>
)};
}
export const StyledHeader styled(Header)`
color: blue;
`;
// you can pass other props down to Header
<StyledHeader
anotherProp='testing!!'/>
вы можете увидеть примеры этого паттерна в их документы. Надеюсь, поможет!
Да, вы можете видеть, что они используют компоненты класса, передав свойство className. С другой стороны, я не использовал интерполяцию компонентов (обязательно буду), но она работает, пока вы нацеливаетесь на стилизованный компонент, а не на компонент React.
Удивительный! Спасибо! Я прочитал ту часть документации, которую вы связали, но меня отбросило, поскольку она написана в функциональной форме (я все еще новичок в React). Будет ли применимо эта часть документов (второй пример ... тот, у которого есть
const StyledA = styled(A)``)? Я все же проверил это, и, похоже, он работает так, как я надеялся :)