기능은 React 하위 기능으로 사용할 수 없습니다.이 문제는 렌더에서가 아니라 구성요소를 반환할 때 발생할 수 있습니다.

기능은 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 하위 기능으로 사용할 수 없습니다.이 문제는 렌더링에서 <컴포넌트 />가 아닌 컴포넌트를 반환할 때 발생할 수 있습니다.아니면 이 함수를 반환하는 것이 아니라 호출하려는 것이었을 수도 있습니다. New HOC(App에서 만든 것)에서는 앱의 div(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>
    }
}

내가 뭘 잘못하고 있지?

저도 라우팅에서 올바른 snytax를 사용하지 않았기 때문에 이 오류가 발생했습니다.이는 App.js의 <Routes> 섹션 아래에 있습니다.

거짓:

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

정답:

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

이제 Movies List가 컴포넌트로 인식됩니다.

일반 컴포넌트로 사용하고 있지만 실제로는 컴포넌트를 반환하는 함수입니다.

다음과 같은 작업을 수행해 보십시오.

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에 대해서는 문서에서 확인할 수 있습니다.또한 리액트 요소와 컴포넌트의 차이에 대해서도 읽을 것을 권장합니다.

나는 반응으로 논리를 공유하는 다양한 방식과 패턴에 대한 기사를 썼다.

내 경우 반응 구성요소의 렌더 함수에서 함수 이름 뒤에 ()을 추가하는 것을 잊었습니다.

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

       return ctrl;
    };


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

에러 메시지에 기재되어 있는 렌더 메서드 변경

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

문제를 해결하다

이 에러는, 다음의 순서에 따라서 발생했습니다.https://reactjs.org/docs/add-react-to-a-website.html

제가 먹은 건 다음과 같습니다.

ReactDOM.render(Header, headerContainer);

다음 중 하나여야 합니다.

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

저도 이 오류가 있었어요.문제는 함수를 어떻게 호출하느냐였다.

잘못된 코드:

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

반면에.id함수가 됩니다.

올바른 코드:

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

sagiv의 답변에 덧붙여, 되돌리려는 방법으로 자 컴포넌트를 되돌리는 것이 아니라 모든 자 컴포넌트를 구성할 수 있도록 부모 컴포넌트를 작성해야 합니다.

모든 어린이가 아래와 같이 사용할 수 있도록 부모 컴포넌트를 의도하고 그 안에 소품을 전달해 주세요.

const NewComponent = NewHOC(Movie);

여기서 New HOC은 부모 구성 요소이고 모든 아이들이 영화를 소품으로 사용할 것입니다.

하지만 어쨌든 guyd6는 새로운 리액션 개발자의 문제를 해결했습니다.이 문제도 발생할 수 있습니다.이러한 문제를 해결할 수 있는 곳은 바로 여기입니다.

클래스 컴포넌트를 내보내기 전에 상위 컴포넌트를 호출함으로써 이 문제를 해결할 수 있었습니다.내 문제는 특히 다음 명령어를 사용하는데 있었다.react-i18next번역 방법

export default withTranslation()(Header);

그 후, 당초의 희망대로, 클래스를 「컴포넌트」라고 부를 수 있었습니다.

<Header someProp={someValue} />

이벤트를 호출하지 않고 jsx에서 직접 함수를 호출할 때도 발생합니다.맘에 들다

다음과 같이 쓰면 오류가 표시됩니다.

<h1>{this.myFunc}<h2>

다음과 같이 쓰면 됩니다.

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

웹팩에서 이렇게 느릿느릿 로딩하고 있었어요.

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

제 경우 부모로부터 트랜스포트 클래스 컴포넌트를 사용하여 내부에서 타이프스크립트와 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>
        )
      }}
    />
    )
  }
}

하는 게 뭐가 문제죠?

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

저 같은 경우에는 '() = >' 부분을 삭제하는 것을 잊었습니다.멍청한 ctrl+c+v 실수.

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

따라서 다음과 같이 해야 합니다.

const Account = ({ name }) => {

저 같은 경우에는

<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 기능을 사용할 때 오류가 발생합니다.

언급URL : https://stackoverflow.com/questions/48458334/functions-are-not-valid-as-a-react-child-this-may-happen-if-you-return-a-compon