Question

我正在努力通过一个快速的应用程序来获得更好的React-Router v4。现在我的计划是只有一个页面，根据输入填充第二页。

我正在尝试将两个函数onNameChange和onEmailChange通过App组件传递给vCardForm组件。在尝试遵循此示例时：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;

Answer 1

在App.js中，您不会在渲染方法中将任何道具传递给<Main />。尝试使用相同的代码：

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

考虑到之前的评论，您应该将所有组件都大写。然后，将相同的道具传递到<Route/>：

的渲染道具中

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

另请注意，exact上的Route道具意味着您需要完全位于路线/上。正如您在https://localhost:3000/假设您正在使用端口3000来为您的应用提供服务一样。

React-Router v4 <route render =“{...}”>不显示组件

1 个答案: