Question

我想创建一个具有自定义样式的DIV组件：背景色为蓝色。之后，我想要实例并添加文本作为子项。我正在尝试这样做：

WRAPPER：

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

使用大写＆＃34; Wrapper＆＃34;在JSX中：

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

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

由@Quentin描述：

来自some react release notes


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

创建一个包装器ReactJS

1 个答案: