Question

我想创建一个带有函数的XYZService，以 element 作为参数，我通过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)
    );
}

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

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.p color: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 属性，以获取在您的样式中定义的样式已应用样式化的组件。

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

使用React.createElement创建样式组件

3 个答案: