Как я могу передать реквизиты компоненту Link из response-router-dom через расширение пользовательского интерфейса Semanti c? - PullRequest
Новая
       100

Как я могу передать реквизиты компоненту Link из response-router-dom через расширение пользовательского интерфейса Semanti c?

1 голос
/ 18 июня 2020

Я создаю мини-блог и хочу щелкнуть статью, которая направит меня на URL-адрес, содержащий данные из выбранной карточки.

Вот мой app.js файл, который содержит маршруты / пути.

Я хочу, чтобы пути / духовные записи / письма и / исторические записи / записи отображали компонент {Writing}, но передавали реквизиты в него, чтобы он мог отобразить саму статью. 

import React from 'react';
import './App.css';
import LandingPage from  './pages/LandingPage/LandingPage';
import SpiritualWritings from './pages/SpiritualWritings/SpiritualWritings';
import HistoricalWritings from './pages/HistoricalWritings/HistoricalWritings';
import Writing from './pages/Writing/Writing';
import {Route,Router} from 'react-router-dom'
import history from './history';

function App() {
  return (
    <div className = "mainBackground">
      <Router history = {history}>
        <Route path = "/" component = {LandingPage} exact />
        <Route path = "/spiritualwritings" component = {SpiritualWritings} exact/>
        <Route path = "/historicalwritings" component = {HistoricalWritings} exact/>
        <Route path = "/spiritualwritings/writing" component = {Writing} exact/>
        <Route path = "/historicalwritings/writing" component = {Writing} exact/>
      </Router>
    </div>
  );
}

export default App;

Вот мой SpiritualWritings.jsx исходный код 

import React,{Component} from 'react';
import './SpiritualWritings.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid,Card,Icon,Transition} from 'semantic-ui-react';
import { Link } from 'react-router-dom';



export default class SpiritualWritings extends Component{

    state = {
        open : false
    }

    componentDidMount(){
        this.setState({
            open: true
            }
        )
    }


    render () {
        var articles = Array(15).fill({
            header: "Article",
            meta : "Date",
            description : "Quick Summary",
            content: "This is the actual content"
        })

        var auth = true;

        var cardArray = articles.map((data,index) => (
            <Transition
                animation = "vertical flip"
                duration = {500+index*100}
                visible = {this.state.open}
            >
                <Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">
                    <Card.Content textAlign = {"center"}>
                        <Card.Header>
                            {data.header + " " + index}
                        </Card.Header>
                        <Card.Meta>
                            {data.meta + " " + index}
                        </Card.Meta>
                        <Card.Description>
                            {data.description + " " + index}
                        </Card.Description>
                    </Card.Content>
                </Card>
            </Transition>
        ))

        if (auth){
            cardArray.unshift(
                <Card link color = {"green"}>
                    <Card.Content textAlign = {"center"}>
                        <Card.Header >
                            Submit a New Writing
                        </Card.Header>
                    </Card.Content>
                    <Card.Content textAlign = {"center"} extra>
                            <Icon.Group size = {"big"}>
                                <Icon color = {"green"} name = {"pencil alternate"} />
                                <Icon color = {"green"} corner = {"bottom right"} name = {"plus"}/>
                            </Icon.Group>
                    </Card.Content>
                </Card>
            )
        }

        return(
            <Grid stackable padded = {"vertically"} className = "spiritualPageGrid">
                <SiteHeader></SiteHeader>
                <div className = "spiritualPageMainRow">
                    <Card.Group stackable itemsPerRow = {6}>
                        {cardArray}
                    </Card.Group>
                </div>
                <Footer></Footer>
            </Grid>
        )
    }

}

Строка, на которой я сосредоточен, следующая:

<Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">

Моя цель - щелкнуть карточку и передать содержащиеся в ней данные в {Link}, чтобы мой файл Writing.jsx смог отобразить статью.

Вот мой Writing.jsx исходный код. Я написал только баребоны, но мне нужно как-то получить свои данные из SpiritualWritings.jsx

import React from 'react';
import './Writing.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid} from 'semantic-ui-react';



function Writing(){



    return(
        <Grid padded = {"vertically"} className = "writingPageGrid">
            <SiteHeader></SiteHeader>
            <Grid.Row className = "writingPageMainRow">
                ARTICLE CONTENT HERE
            </Grid.Row>
            <Footer></Footer>
        </Grid>
    )
}

export default Writing;

1 Ответ

1 голос
/ 18 июня 2020

вы можете использовать перенаправление response-router-dom следующим образом. 

this.state = {
    redirect: false,
    data: null
}

redirectToWriting = (data) => {
    this.setState({
        redirect: true,
        data
    })
}

render(){
    if (redirect) {
        return <Redirect to={{
            pathname: "/spiritualwritings/writing",
            state: { this.state.data }
        }}
        />
    }
    var cardArray = articles.map((data, index) => (
        <Transition
            animation="vertical flip"
            duration={500 + index * 100}
            visible={this.state.open}
        >
            <Card link color={"blue"} onClick={() => this.redirectToWriting(data)}>
                <Card.Content textAlign={"center"}>
                    <Card.Header>
                        {data.header + " " + index}
                    </Card.Header>
                    <Card.Meta>
                        {data.meta + " " + index}
                    </Card.Meta>
                    <Card.Description>
                        {data.description + " " + index}
                    </Card.Description>
                </Card.Content>
            </Card>
        </Transition>
    ))

    return (
        //your rest of code
    )
}

и в вашем дочернем компоненте (Writing Component) вы можете получить данные как 

console.log(this.props.location.state)
...