创建一个包装ReactJS[复制]

Question

我想创建一个组件，它是一个具有自定义样式的DIV：背景色蓝色。在那之后，我想引用它并添加文本作为子对象。我正在尝试这样做：

包装器：

import React from 'react';

export default class Wrapper extends React.Component {
constructor() {
    super();
}

render() {
    const { children, ...props } = this.props;
    return (
        <div style="background-color: blue" {...props}>
            {children}
        </div>
    );
}
}

我是这样实例化的：

实例：

import wrapper from './../../components/wrapper.jsx';

render() {
    return (
        <wrapper>hi world</wrapper>
    );
}

但它不起作用。我怎么能这样做？。非常感谢。

Answer 1

在JSX中使用大写的“包装器”：

import Wrapper from './../../components/wrapper.jsx';

render() {
    return (
        <Wrapper>hi world</Wrapper>
    );
}

正如@Quentin所描述的：

从一些发行说明中

JSX标记名约定（小写名称表示内置组件，大写名称表示自定义组件）。