使用 React.createElement 创建样式组件

Question

我想创建一个带有函数的 styled-component，将 element 作为参数，我用 React.createElement 调用创建它。

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].

我可能遗漏了什么，但我无法弄明白。

Answer 1

您无法创建渲染的 React 节点的 HOC。下面一行是渲染调用：

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);

Answer 2

让事情变得简单 import styled from 'styled-component'//import library for making styled components

例如，如果想创建一个基于 <p></p> 的样式化组件，您可以这样做：

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

您可以随心所欲地投放广告 css 定义。现在开始使用它：

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

在这里您可以使用 'p'（未设置样式）代替 'MyP'。

它也适用于 const MyComponent=React.creatElement(MyP,null,'Hello'); 希望对您有所帮助

Answer 3

Felix 答案几乎正确，但您仍然需要在 className 属性内联组件函数，以便应用您的 样式化组件 中定义的样式。

我能够找到正确的答案，我决定使用JSX-syntax，如果你需要通过 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 />
)

Answer 4

从 styled-components v4 开始，您只需使用 as prop 即可轻松完成此操作。

来自文档：

If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.

import styled from "styled-components";

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

Answer 5

我是这样实现的：

组件：

export default function StyledCustomComponent({tag, className, children}) {
const customTag = React.createElement(tag);

const StyledCustomElement = styled(customTag.type)`
"some css rules"
`
return (
    <StyledCustomElement {...className}>
        {children}
    </StyledCustomElement>
  )
}

然后在另一个文件中调用该组件：

<StyledCustomElement tag='div'> Some content <StyledCustomElement/>

希望对您有所帮助！

使用 React.createElement 创建样式组件

Creating styled-component with React.createElement

createelement

reactjs

styled-components