我試圖通過一個快速的應用程序來獲得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;
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字母開始組件名稱。 –