函數作為 React 子項無效。 如果您返回一個組件而不是從渲染中返回，則可能會發生這種情況

Question

我寫了一個高階組件：

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 />，則可能會發生這種情況。 或者您可能打算調用此 function 而不是返回它。 在 NewHOC（由 App 創建）在 div（由 App 創建）在 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>
    }
}

我究竟做錯了什么？

Answer 1

您將它用作常規組件，但它實際上是一個返回組件的函數。

嘗試做這樣的事情：

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 的信息，我還建議您閱讀有關react 元素和組件之間的區別的信息

我寫了一篇關於在 React 中共享邏輯的不同方式和模式的文章。

Answer 2

在我的情況下，我忘記在反應組件的渲染函數內的函數名稱之后添加 ()

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

       return ctrl;
    };


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

更改渲染方法，因為它在錯誤消息中指出

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

解決了問題

Answer 3

添加到 sagiv 的答案中，我們應該以一種可以包含所有子組件的方式創建父組件，而不是以您嘗試返回的方式返回子組件。

嘗試意向父組件並在其中傳遞道具，以便所有孩子都可以像下面一樣使用它

const NewComponent = NewHOC(Movie);

這里 NewHOC 是父組件，它的所有子組件都將使用電影作為道具。

但無論如何，你們已經為新的 React 開發人員解決了一個問題，因為這可能也是一個可能出現的問題，他們可以在這里找到解決方案。

Answer 4

就我而言，我是從父級傳輸類組件並將其用作 prop var，使用 typescript 和 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>
        )
      }}
    />
    )
  }
}

Answer 5

我能夠通過在導出類組件之前調用我的高階組件來解決這個問題。 我的問題是專門使用react-i18next及其 withTranslation 方法，但這是解決方案：

export default withTranslation()(Header);

然后我能夠像最初希望的那樣調用類 Component：

<Header someProp={someValue} />

Answer 6

我在按照此處的說明操作時遇到此錯誤： https : //reactjs.org/docs/add-react-to-a-website.html

這是我所擁有的：

ReactDOM.render(Header, headerContainer);

應該是：

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

Answer 7

我也遇到了這個錯誤，因為我沒有在路由時使用正確的 snytax。 這是在<Routes>部分下的我的 App.js 中：

錯誤的：

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

正確的：

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

所以現在MoviesList被識別為一個組件。

Answer 8

當您直接從 jsx 而不是在事件中調用函數時，也會發生這種情況。 喜歡

如果你這樣寫，它會顯示錯誤

<h1>{this.myFunc}<h2>

如果你寫，它會去：

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

Answer 9

我是從這樣的 webpack 延遲加載中得到的

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

Answer 10

這樣做會有什么問題；

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

Answer 11

就我而言，我忘記刪除這部分 '() =>'。 愚蠢的 ctrl+c+v 錯誤。

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

所以它應該是這樣的：

const Account = ({ name }) => {

Answer 12

我也有這個錯誤。 問題是如何調用該函數。

錯誤代碼：

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

而id是一個函數，所以：

正確的代碼：

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

Answer 13

就我而言

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

改變了

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

Answer 14

你應該使用

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

如果你使用 Es6 速記 function 它將給出錯誤使用常規舊 javascript function。