Question

我正在用reactJS构建应用程序，但仅在PRODUCTION构建上有问题（开发人员一切正常）

我确定了问题，但无法解决，我有一个名为“仪表板”的类和一个子组件，该子组件中的另一个子组件使应用程序引发错误130。

错误：最小的React错误＃130；请访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=获取完整的消息，或使用非最小化的dev环境获取完整的错误和其他有用的警告。

这是我的代码：

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。

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

Answer 2

您应该更新功能

    connectionPannel = () => {
        return(<div>
            {this.loginTextBox()}
        </div>)
    }

错误：最小化React错误＃130：元素类型无效：预期为字符串或类/函数，但得到：未定义

2 个答案: