我对此很了解，我正在尝试通过React从一个js页面传递用户的详细信息以在React的另一个页面上显示，但是我不确定如何完成此操作。以下是我所拥有的
我不确定是否应该使用App.js路由将道具传递到显示页面，还是可以在通过NavLink输入详细信息的页面上传递道具？？感谢您的帮助
这是我的APP.js路由。我应该在这里传递页面的道具吗？
ignoreCase这是我获取用户输入的详细信息并获取状态的地方
import React, { Component } from 'react';
//import PostList from './posts/YourDetails'
import { BrowserRouter, Switch} from 'react-router-dom';
import { Route} from 'react-router-dom';
import ReactDom from 'react-dom';
import './App.css';
import './index.css';
import home from "./Components/PersonalDetails/home";
import PersonalDetails from "./Components/PersonalDetails/pDetails_Name";
import addDetails from "./Components/PersonalDetails/addDetails";
import YourCar from "./Components/PersonalDetails/YourCar";
import displayDetails from "./Components/PersonalDetails/displayDetails";
import TEST from "./Components/TEST";
import Navigation from "./Components/Navigation";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation / >
<Switch>
<Route
path="/"
component={home} exact/ >
<Route
path="/pDetails_Name"
component={PersonalDetails}/ >
<Route
path="/displayDetails"
component={displayDetails}/ >
<Route component={Error}/ >
</Switch>
<TEST / >
</div>
</BrowserRouter>
)
}
}
export default App;
我正在尝试渲染用户喜欢的道具以显示在下一页上，但不确定如何处理
import {NavLink} from 'react-router-dom'
import React, {Component } from 'react'
class pDetails_Name extends React.Component{
/*const pDetails_Name = () => {*/
constructor(props){
super(props)
this.state = {
FirstName: "",
MiddleName:"",
Surname: "",
Email: ""
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange =(event)=>{
this.setState({[event.target.name]:event.target.value});
}
handleSubmit =(event)=> {
event.preventDefault()
const user = {
FirstName: this.state.FirstName,
MiddleName: this.state.MiddleName,
Surname: this.state.Surname,
Email: this.state.Email,
}
console.log("The details entered are: " , user);
}
getInitialState () {
return {
selectedOption: ''
};
}
render(){
return(
<div id="Overhead">
<div className="borderText">
Lets get some personal details
</div>
<div className ="container">
<form onSubmit ={this.handleSubmit}>
<div className="row">
<div className="col-100">
<label id="btnLabel">Have you been a permanent resident of the USA from birth?</label>
</div>
<div className="col-75">
<input type="radio"
value="Yes"
name ="Resident"
defaultChecked={this.state.selectedOption === 'Yes'}
onChange={this.handleInputChange}
/> Yes<br></br>
<input
type="radio"
value="No"
name ="Resident"
defaultChecked={this.state.selectedOption === 'No'}
onChange={this.handleInputChange}
/> No<br></br>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Title</label>
</div>
<div className="col-15">
<select name= "Title" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
</select>
</div>
<div className="col-25">
<label>First Name:</label>
</div>
<div className="col-75">
<input type="text"
name="FirstName"
placeholder="Your first name.."
onChange={this.handleInputChange} value={this.state.FirstName}/>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Middle Name:</label>
</div>
<div className="col-15">
<input type="text"
name="MiddleName"
placeholder="Your middle name (Optional).. "
onChange={this.handleInputChange} value={this.state.MiddleName}
/>
</div>
<div className="col-25">
<label>Surname:</label>
</div>
<div className="col-75">
<input type="text"
name="Surname"
placeholder="Your surname.."
onChange={this.handleInputChange} value={this.state.Surname} />
</div>
</div>
<div className="row">
<div className="col-5">
<label>Gender:</label>
</div>
<div className="col-15">
<select name = "Gender" onChange={this.handleInputChange} >
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div className="col-25">
<label>Marital Status:</label>
</div>
<div className="col-75">
<select name = "MaritalStatus" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Single">Single</option>
<option value="Civil_Partnership">Civil Partnership</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Age Range:</label>
</div>
<div className="col-15">
<select name="AgeRange" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="17-25">17-25</option>
<option value="26-60">26-60</option>
<option value="61-80">61-80</option>
</select>
</div>
<div className="col-25">
<label>Email:</label>
</div>
<div className="col-75">
<input type="text"
name="Email"
placeholder="Your email.."
onChange={this.handleInputChange}
value={this.state.Email}/>
</div>
</div>
<button>Submit </button>
<div className="borderButtons">
<ul className="header">
<li className ="borderLinks" type="label"><NavLink id="nav" to="/">Back</NavLink></li>
<li className ="borderLinks" type="label"><NavLink id="nav" to="/displayDetails">Next</NavLink></li>
</ul>
</div>
</form>
</div>
</div>
)
} //end of render
}
export default pDetails_Name;
答案 0 :(得分：0)
由于尝试通信的组件是独立的组件（而不是父子或兄弟姐妹），因此您需要使用Redux（或同等组件）（或）基于React Event的通信（为此我没有找到任何文档）（或）使用RxJS可观察对象的共享服务。
我已经使用RxJS可观察对象创建了一个示例here。
注意：请不要与组件名称混淆。