Question

您好，我在ReactJs中拥有主要详细信息关系，我需要帮助将多个信息从“主要”传递到“单击”按钮上的详细信息页面。

我有代码here

在母版页中，我有此链接

<Link to={`${match.path}/${results.id}/empDetail`}>
                  {results.id}
                </Link>

详细信息页面

function empDetail({ match }) {
  return (
    <div>
      <h2>ID {match.params.id}</h2>
      <h2>First Name: {match.params.id}</h2>
      <h2>Last Name: {match.params.id}</h2>
    </div>
  );

我想将{results.ID}, {results.First_Name} and {results.Last Name}..传递给empDetail

Answer 1

您可以将结果对象作为道具发送给子组件，而不是使用URL参数。

类似这样的东西：

<Route path="/:outer/:id/empDetail" render={(props) => <empDetail details={result} {..props} />} />

Answer 2

Link转到：对象可以具有以下任何属性的对象：

路径名：代表链接路径的字符串。
搜索：查询参数的字符串表示形式。
哈希：网址中的哈希，例如＃a-hash。
状态：坚持到该位置的状态。

状态：为我们解决了难题，即状态：{pass：'some data'} 所以我们可以做这样的事情

<Link to={{ pathname: '/route', state: { id: results.ID,..other params} }}>My route</Link>

然后，您可以从组件内部访问状态对象：

const {id} = props.location.state

console.log(id)

您的empDetail看起来像这样

function empDetail({ location }) {
const {state: { id, firstName, lastName }}= location
  return (
    <div>
      <h2>ID {match.params.id}</h2>
      <h2>First Name: {match.params.firstName}</h2>
      <h2>Last Name: {match.params.lastName}</h2>
    </div>
  );

我如何将多个记录传递到ReactJs的详细信息页面

2 个答案: