时间戳

首页 > 解决方案 > 错误：缩小的 React 错误 #130：元素类型无效：预期为字符串或类/函数，但得到：未定义

javascript - 错误：缩小的 React 错误 #130：元素类型无效：预期为字符串或类/函数，但得到：未定义

问题描述

我正在 reactJS 中构建一个应用程序，我只在 PRODUCTION 构建时遇到问题（在开发中一切都很好）

我发现了问题但无法解决，我有一个名为“仪表板”的类和一个子组件，子组件中的另一个子组件使应用程序引发错误 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 或专用服务器

标签： javascriptreactjscomponents

解决方案

据我所知，这实际上是一个 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。

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

推荐阅读