[解決済み] Reactの子プロセスとして、Functionsは有効ではありません。レンダーからではなく、Componentを返した場合に発生する可能性があります。

質問

高次コンポーネントを作成しました。

import React from 'react';


const NewHOC = (PassedComponent) => {
    return class extends React.Component {
        render(){
            return (
                <div>
                    <PassedComponent {...this.props}/>
                </div>
            )
        }
    }
}

export default NewHOC;

上記をApp.jsで使用しています。

import React from 'react';
import Movie from './movie/Movie';
import MyHOC from './hoc/MyHOC';
import NewHOC from './hoc/NewHOC';
export default class App extends React.Component {
  render() {
   return (
    <div>
     Hello From React!!
     <NewHOC>
        <Movie name="Blade Runner"></Movie>
     </NewHOC>
    </div>
   );
  }
 }

しかし、出てくる警告は

警告です。関数はReactの子として有効ではありません。これは、以下の場合に発生します。 の代わりにComponentを返した場合、発生する可能性があります。または または、この関数を返すのではなく、呼び出すことを意図しています。 in NewHOC (アプリで作成) in div (作成者: App) in App

Movie.jsファイルは。

import React from "react";

export default class Movie extends React.Component{
    render() {
        return <div>
            Hello from Movie {this.props.name}
            {this.props.children}</div>
    }
}

私は何を間違えているのでしょうか？

どうすればいいのでしょうか？

通常のコンポーネントとして使っているようですが、実はコンポーネントを返す関数なのです。

こんな感じにしてみてください。

const NewComponent = NewHOC(Movie)

そして、このように使うことになります。

<NewComponent someProp="someValue" />

以下は実行例です。

const NewHOC = (PassedComponent) => {
  return class extends React.Component {
    render() {
      return (
        <div>
          <PassedComponent {...this.props} />
        </div>
      )
    }
  }
}

const Movie = ({name}) => <div>{name}</div>

const NewComponent = NewHOC(Movie);

function App() {
  return (
    <div>
      <NewComponent name="Kill Bill" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

ということで、基本的には NewHOC はコンポーネントを受け取り、渡されたコンポーネントをレンダリングする新しいコンポーネントを返すだけの関数です。 通常、このパターンはコンポーネントを強化し、ロジックやデータを共有するために使用されます。

で HOCS について読むことができます。 docs を読むことをお勧めしますし、また リアクトの要素とコンポーネントの違い

私は 記事 にて、reactでロジックを共有する様々な方法とパターンを紹介しました。