React-Router v4 <Route render = {...} />不顯示組件

我試圖通過一個快速的應用程序來獲得React-Router v4更好的未知。現在我的計劃是隻有一個表單，根據輸入填入第二個頁面。React-Router v4 <Route render = {...} />不顯示組件

我想通過應用組件向vCardForm組件傳遞兩個函數onNameChange和onEmailChange。在試圖遵循這個例子：https://github.com/ReactTraining/react-router/issues/4627我發現我的組件甚至沒有使用render = {...}屬性加載。以下是我的代碼，任何幫助，將不勝感激。

組件/應用/ index.js

import React, { Component } from 'react'; 
import Header from '../Header'; 
import Main from '../Main'; 
import './App.css'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '', 
     email: '' 
    } 

    this.onNameChange = this.onNameChange.bind(this); 
    this.onEmailChange = this.onEmailChange.bind(this); 
    } 

    onNameChange(event) { 
    this.setState({ name: event.target.value }) 
    } 

    onEmailChange(event) { 
    this.setState({ email: event.target.value }) 
    } 

    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Main /> 
     </div> 
    ); 
    } 
} 

export default App;

組件/主/ index.js

import React, { Component } from 'react'; 
import vCardForm from '../vCardForm'; 

import { Switch, Route } from 'react-router-dom'; 

class Main extends Component { 
    render() { 
    const { 
     onNameChange, 
     onEmailChange 
    } = this.props; 

    return (
     <main className="App-intro"> 
     <Switch> 
      <Route exact path='/' render={(props) => (
      <vCardForm /> 
     )} /> 
     </Switch> 
     </main> 
    ) 
    } 
} 

export default Main;

組件/ vCardForm/index.js

import React, { Component } from 'react'; 

class vCardForm extends Component { 
    render() { 
    return (
     <form> 
     <p> 
      <label htmlFor="name">Name: </label> 
      <input id="name" type="text" placeholder="Name" /> 
     </p> 
     <p> 
      <label htmlFor="email">Email: </label> 
      <input id="email" type="text" placeholder="Email" /> 
     </p> 
     <p> 
      <button type="submit">Submit</button> 
     </p> 
     </form> 
    ) 
    } 
} 

export default vCardForm;

來源

2017-09-05 David Moran

https://github.com/RUJodan/Source-React/blob/master/src/index.jsx這裏是我如何使用react-router-4的例子。我不知道是不是因爲你沒有返回組件，但是如果你沒有傳遞任何道具，我只需要簡單的'。另外，我不知道Switch是否覆蓋它，但是不應該將它封裝在組件中？ –

您需要將組件名稱大寫爲VCardForm，否則它將被解釋爲html標記 - https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters – TestWell

您必須用Captial字母開始組件名稱。 –

在你的App.js中，你沒有在渲染方法中傳遞任何道具到<Main />。嘗試使用相同的代碼：

<Main onNameChange={this.onNameChange} onEmailChange={this.onEmailChange} />

考慮到以前的評論，您應該大寫所有組件。然後，通過同樣的道具到<Route/>的渲染道具：

<Route exact path='/' render={(props) => (
    <VCardForm {...props}/> 
)} />

在心中也保持了exact道具上Route意味着你需要的路線/準確的。正如你需要在https://localhost:3000/，假設您使用端口3000來爲您的應用程序。

來源

2017-09-05 22:43:56 jonlu

React-Router v4 <Route render = {...} />不顯示組件

回答

相關問題