使用React Bootstrap獲得不變違規

Question

以下代碼給我一個Uncaught Invariant Violation。我不知道爲什麼。它幾乎完全是從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/>); 
}; 

Answer 1

您需要從react-boostrap，真正的定義它們，而不是從.css文件導入這些部件 - 即沒有任何反應的組分，只是樣式（這就是爲什麼你'越來越未定義）。

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