使用 React.createElement 创建样式组件答案

【问题标题】：Creating styled-component with React.createElement使用 React.createElement 创建样式组件
【发布时间】：2019-11-17 22:11:15
【问题描述】：

我想创建一个带有函数的styled-component，将元素作为参数，我使用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].

我可能遗漏了一些东西，但无法弄清楚。

【问题讨论】：

标签： reactjs styled-components createelement

【解决方案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);

【讨论】：

你好@Felix，感谢您的澄清，我显然错过了 element 和 Component 之间的区别您的最后一个代码示例工作正常，只有一个未成年人问题 - 由样式化函数调用定义的 class 将不会应用于结果组件的 props。换句话说：渲染的内容实际上没有样式。
仍在与正确的语法作斗争。我需要将 className 传递给 props，因此从样式化组件生成的类名将应用

【解决方案2】：

Felix 的答案几乎是正确的，但是您仍然需要通过内联组件函数中的 className 属性来获取您在 中定义的样式>样式化组件已应用。

我找到了正确答案in this thread，我决定使用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 />
)

【讨论】：

您知道如何获取模板字面量、创建类型对象并动态传递吗？我希望像export const StyleMyText = (type: TextStyleKey, Element: React.ReactElement) => styled(({ className }) => <Element.type {...Element.props} className={className} />)(TextStyles[type]); 这样的东西会起作用吗？

【解决方案3】：

让事情变得简单 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'); 希望对你有帮助

【讨论】：

谢谢，但实际上在我的组件中，负责渲染元素，元素来自外部，不应该定义在组件。