错误：缩小 React 错误 #130：元素类型无效：需要一个字符串或类/函数但得到：未定义

Question

我正在用 reactJS 构建一个应用程序，我只在 PRODUCTION build 上遇到问题（dev 上的一切都很好）我发现了问题但无法解决，我有一个名为“Dashboard”的类和其中的一个子组件，子组件中的另一个子组件使应用程序引发错误 130。错误：缩小 React 错误 #130；访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。这是我的代码：export class Dashboard extends React.Component {    loginTextBox = () => {        return (<div> Hello World</div>)    }    connectionPannel = () => {        return(<div>            <this.loginTextBox></this.loginTextBox>   /* IF I COMMENT THIS, IT WORKS */        </div>)    }    render() {        return(<div className="h-100">            <this.connectionPannel></this.connectionPannel>        </div>);    }}部署我使用： yarn build 然后我使用 serve -s build 或专用服务器

Answer 1

据我所知，这实际上是一个 babel 编译错误。我建议内联 JSX 或将这些位提取到实际功能组件中：

// inline the JSX

export class Dashboard extends React.Component {

    render() {

        return (

            <div className="h-100">

                <div>

                  <div>Hello World</div>

                </div>

            </div>

        );

    }

}

// extract to components

export class Dashboard extends React.Component {

    render() {

        return(<div className="h-100">

            <ConnectionPannel />

        </div>);

    }

}

function ConnectionPannel() {

  return (

    <div>

      <LoginTextBox />

    </div>

  )

}

function LoginTextBox() {

  return <div>Hello World</div>

}

在那种情况下，您还需要将东西作为道具传递。这可以说是更惯用的 React。

您也可以调用此答案中共享的函数，但这种方法实际上没有任何好处。

Answer 2

你应该更新功能

    connectionPannel = () => {

        return(<div>

            {this.loginTextBox()}

        </div>)

    }