Я написал компонент высшего порядка:
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/> из рендера. Или, может быть, вы хотели вызвать эту функцию, а не вернуть ее. в NewHOC (создается приложением) в div (создается приложением) в приложении
Файл 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>
}
}
Что я делаю неправильно?