函数作为 React 子函数无效。如果返回组件而不是从呈现返回组件，可能会发生这种情况

我写了一个高阶组件:

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 而不是 < Component/> 你想要调用这个函数而不是返回它。 在 NewHOC (由 App 创建) 在 div 中(由 App 创建) 应用程式

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

我做错了什么？

282302 次浏览
小开
最佳答案

您将它作为一个常规组件使用，但它实际上是一个返回组件的函数。

试试这样做:

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，我也推荐读到 反应元素与组分的区别

我写了一个关于共享逻辑反应的不同方式和模式的 文章。

小开

我们应该以这样的方式创建父组件: 它可以包含所有子组件，而不是以您试图返回的方式返回子组件。

尝试使用父组件并在其中传递道具，这样所有的孩子都可以像下面这样使用它

const NewComponent = NewHOC(Movie);

这里，NewHOC 是父组件，它的所有子组件都将使用 film 作为道具。

但无论如何，你们已经为新的反应开发人员解决了一个问题，因为这也可能是一个问题，这里是他们可以找到解决方案的地方。

小开

在我的例子中，我从父类中传输 class 组件，并在内部使用它作为道具 var，使用 type escript 和 Formik，并且运行良好，如下所示:

家长1

import Parent2 from './../components/Parent2/parent2'
import Parent3 from './../components/Parent3/parent3'


export default class Parent1 extends React.Component {
render(){
<React.Fragment>
<Parent2 componentToFormik={Parent3} />
</React.Fragment>
}
}

家长2

export default class Parent2 extends React.Component{
render(){
const { componentToFormik } = this.props
return(
<Formik
render={(formikProps) => {
return(
<React.fragment>
{(new componentToFormik(formikProps)).render()}
</React.fragment>
)
}}
/>
)
}
}
小开

在我的例子中，我忘记在一个反应组件的呈现函数中的函数名后面加上()

public render() {
let ctrl = (
<>
<div className="aaa">
{this.renderView}
</div>
</>
);


return ctrl;
};




private renderView() : JSX.Element {
// some html
};

将呈现方法更改为

        <div className="aaa">
{this.renderView()}
</div>

解决了问题

小开

当您直接从 jsx 而不是在事件中调用函数时，也会发生这种情况

如果像 这样写，它将显示错误

<h1>{this.myFunc}<h2>

如果你写下:

<h1 onClick={this.myFunc}>Hit Me</h1>
小开

在导出类组件之前，我能够通过调用高阶组件来解决这个问题。我的问题是特别使用 react-i18next及其 with 翻译方法，但这里有一个解决方案:

export default withTranslation()(Header);

然后我可以像最初希望的那样调用类 Component:

<Header someProp={someValue} />
小开

我是从这样的网络包延迟加载得到这个

import Loader from 'some-loader-component';
const WishlistPageComponent = loadable(() => import(/* webpackChunkName: 'WishlistPage' */'../components/WishlistView/WishlistPage'), {
fallback: Loader, // warning
});
render() {
return <WishlistPageComponent />;
}




// changed to this then it's suddenly fine
const WishlistPageComponent = loadable(() => import(/* webpackChunkName: 'WishlistPage' */'../components/WishlistView/WishlistPage'), {
fallback: '', // all good
});
小开

这样做有什么错;

<div className="" key={index}>
{i.title}
</div>


[/*Use IIFE */]


{(function () {
if (child.children && child.children.length !== 0) {
let menu = createMenu(child.children);
console.log("nested menu", menu);
return menu;
}
})()}
小开

我在按照这里的说明操作时遇到了这个错误: https://reactjs.org/docs/add-react-to-a-website.html

以下是我所拥有的:

ReactDOM.render(Header, headerContainer);

它应该是:

ReactDOM.render(React.createElement(Header), headerContainer);
小开

在我的例子中，我忘记删除这个部分’() = >’，愚蠢的 ctrl + c + v 错误。

const Account = () => ({ name }) => {

所以应该是这样的:

const Account = ({ name }) => {
小开

我确实也遇到了这个错误，因为我在路由时没有使用正确的 snytax。这是我在 < 路线 > 部分下面的 App.js:

错:

<Route path="/movies/list" exact element={ MoviesList } />

正确:

<Route path="/movies/list" exact element={ <MoviesList/> } />

所以现在 电影名单被识别为一个组件。

小开

我也有这个错误，问题是如何调用函数。

错误代码 :

const Component = () => {
const id = ({match}) => <h2>Test1: {match.params.id}</h2>
return <h1>{id}</h1>;
};

而 id是一个函数，所以:

正确代码 :

return <h1>{id()}</h1>;
小开

对我来说

<Link key={uuid()} to="#" className="tag">
{post.department_name.toString}
</Link>

改变了

<Link key={uuid()} to="#" className="tag">
{post.department_name.toString()}
</Link>
小开

你应该用

const FunctionName = function (){
return (
`<div>
hello world
<div/>
`
)
};

如果你使用 Es6的速记函数，那么使用普通的旧的 javascript 函数会出错。


提交答案