Создание styled-компонента с помощью React.createElement - PullRequest
Новая
       32

Создание styled-компонента с помощью React.createElement

0 голосов
/ 08 июля 2019

Я хотел бы создать styled-component с функцией, используя элемент в качестве аргумента, который я создаю с помощью React.createElement call. 

const StyledComponent = (element) => styled(element)`
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    `;

const myComponent = (props) => {
    const element = React.createElement('div', null, `Hello World!`);
    return (
        StyledComponent(element)
    );
}

Это приводит к следующей ошибке: 

Uncaught Error: Cannot create styled-component for component: [object Object].

Возможно, я что-то упустил, но не могу понять.

Ответы [ 3 ]

2 голосов
/ 08 июля 2019

Вы не можете создать HOC визуализированного узла React.Следующая строка является вызовом рендеринга: 

const element = React.createElement('div', null, `Hello World!`);

// this is the same as:
const element = <div >Hello World</div>

Вам может потребоваться заменить createElement фактическим функциональным компонентом: 

const element = () => React.createElement('div', null, `Hello World!`);

// this is the same as:
const element = () => <div >Hello World</div>

Теперь вы можете создать стилизованный компоненти сделать это.Полный (соответствующий) код: 

const element = () => React.createElement('div', null, `Hello World!`);
const SComponent = StyledComponent(element);

return React.createElement(SComponent);
0 голосов
/ 09 июля 2019

Феликс ответ был почти правильный, но вам все равно нужно передать свойство className во встроенную функцию компонента, чтобы получить стили, определенные в вашем стиль компонента применяется.

Мне удалось найти правильный ответ в этой теме , я решил использовать JSX-синтаксис , есливам нужно передать refs , вместо этого использовать React.cloneElement .

Полный пример: 

const StyleMyElement = (Element) => styled(({ className }) => <Element.type {...Element.props} className={className} />)`
    position: absolute;
    top: 0;
    ...
`;

...

const element = () => React.createElement('div', null, `Hello World!`);
const StyledComponent = StyleMyElement(element);

return (
    <StyledComponent />
)
0 голосов
/ 08 июля 2019

Пусть все упростит import styled from 'styled-component'//import library for making styled components

Если для intance вы хотите создать стилизованный компонент на основе <p></p>, вы бы сделали следующее:

const MyP = styled.p color:red; font-size:10px; font-weight:bold ;

Вы можете разместить столько объявлений, сколько захотите. Теперь, чтобы использовать это:

const MyComponent=()=>{ <MyP> Hello </MyP> }

Здесь вместо «MyP» вы можете использовать «p» (без стилизации).

Это также будет работать для const MyComponent = React.creatElement (MyP, null, 'Hello'); Надеюсь, это помогло

...