使用React Bootstrap获得不变违规

以下代码给我一个Uncaught Invariant Violation。我不知道为什么。它几乎完全是从Bootstrap例子中复制的。使用React Bootstrap获得不变违规

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'LoginForm'.

import React from 'react'; 
import { FormGroup, ControlLabel, FormControl, HelpBlock, Button } from 'bootstrap/dist/css/bootstrap.css'; 

const FieldGroup = ({ id, label, help, ...props }) => { 
    return (
    <FormGroup controlId={id}> 
     <ControlLabel>{label}</ControlLabel> 
     <FormControl {...props} /> 
     {help && <HelpBlock>{help}</HelpBlock>} 
    </FormGroup> 
); 
}; 

const LoginForm = props => { 
    return (
    <form> 
     <FieldGroup 
     id="loginText" 
     type="text" 
     label="Text" 
     placeholder="Email" 
     /> 
     <FieldGroup 
     id="loginPassword" 
     label="Password" 
     type="password" 
     /> 
     <Button type="submit"> 
     Login 
     </Button> 
    </form> 
); 
}; 

export const LoginCtrl = props => { 
    return (<LoginForm/>); 
};

来源

2016-09-01 Chris B.

您需要从react-boostrap，真正的定义它们，而不是从.css文件导入这些部件 - 即没有任何反应的组分，只是样式（这就是为什么你'越来越未定义）。

import { FormGroup, ControlLabel, FormControl, HelpBlock, Button } from 'react-bootstrap'

来源

2016-09-01 14:06:50

不是JavaScript导入抛出错误？ –

取决于您的构建设置，特别是如果您使用css-loader或类似的WebPack，它不会抛出，因为.css文件不是一个JavaScript模块。这是别的，这是由一个特定的装载机处理。 –

使用React Bootstrap获得不变违规

回答

相关问题