ラッパーの作成ReactJS

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

と、私はそうのようにそれをインスタンス化しています：

INSTANCE：

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

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

しかし、それは動作しません。どうすればいい？ありがとうございました。

Answer 1

使用しJSXで "Wrapper" を大文字：

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

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

それが@Quentinで説明したように：

JSXタグ名規則some react release notesから（小文字の名前が建てを参照してください。 - コンポーネントでは、大文字の名前はカスタムコンポーネントを参照します）。