时间戳

首页 > 解决方案 > 如何在反应中创建指向组件的链接？

reactjs - 如何在反应中创建指向组件的链接？

问题描述

当我单击一个项目时，我希望我的组件的内容显示在不同的视图中。我不明白如何从渲染中调用组件。我想像这个Myitem。为了在 React 中做到这一点，我按照以下方式进行：

 content(item) {
    var me = this.state;
    return(
      <Row>
          <Col xs={12} sm={9} md={9} lg={9}>
            <MyComponent item={item}} />
          </Col>
      </Row>      
      )
  }

  render() {
      var me = this.state;
      return(
        <Fragment>
        <Row>
          {ITEMS.map((item, ind) => {
            return(
              <Col key={ind} xs={12} sm={6} md={4} lg={3}>
                <div onClick={this.content.bind(this, item.item)}>
                </div>
              </Col>
              )
          })}
        </Row>
        {this.content()?this.content():""}
        </Fragment>
      );

但列表和内容显示在同一屏幕中。

谢谢你的帮助。

标签： reactjs

解决方案

简而言之，使用反应路由、导航到其他组件、将数据传递给导航组件的良好示例应用程序。

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const arr = [{id:1,name:'react'},{id:2,name:'redux'}]
const BasicExample = () =>
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/detail" component={Detail} />
    </div>
  </Router>;
  const About = () => (
    <div>
      <h2>About</h2>
    </div>
  );
  const Home = () => (
    <div>
      <h2>Home</h2>
      {arr.map(a=>
        <div key={a.id}>
        <strong>{a.id}</strong>
         <Link to={{
           pathname:"/detail",
           state: a
         }}>{a.name}</Link>
        </div>
        )}
    </div>
  );
const Detail=(props)=><h3>Detail-({props.location.state.id}--{props.location.state.name})</h3>

现场演示

推荐阅读