陣營引導 - 遺漏的類型錯誤：無法讀取屬性「toUpperCase」未定義

Question

我班如下：

import React from 'react'; 
import Input from 'react-bootstrap'; 
    export default class FormWidget1 extends React.Component { 
     render() {  
      if (!this.props.fields) { 
       console.log('no fields passed'); 
      } 
      else { 
       console.log(this.props.fields.length); 
       console.log(this.props.fields); 
      } 

      var formFieldList = this.props.fields.map(function(field) { 
       console.log("iterating"); 
       return (
        <Input type="text" placeholder="testing" label="label" /> 
       ); 
      }); 
      return (
       <div> 
        <form action=""> 
         {formFieldList} 
        </form> 

       </div> 
      ); 
     } 
    } 

如果我更換<Input />與<input />那麼就沒有錯誤。

stacktrace只顯示我的app.jsx，這是沒有用的。

出了什麼問題？

Answer 1

您需要對輸入jsx組件的導入進行解構。

import {Input} from 'react-bootstrap'; 

這樣做是渲染var Input = require('react-bootstrap').Input;而以前必須將渲染var Input = require('react-bootstrap');

它做什麼提到這個文件在這裏陣營引導：

https://react-bootstrap.github.io/getting-started.html#es6

編輯：一個很好的提示是，當你試圖渲染一個組件時，從React得到的錯誤是一個典型的錯誤，而實際上它不是一個反應組件。所以基本上你試圖渲染一個對象，它反應了包含所有組件的引導返回，而不是你想要的實際輸入組件。