Reactjs поделиться ссылкой на контролируемую государством страницу - PullRequest
Новая
       15

Reactjs поделиться ссылкой на контролируемую государством страницу

0 голосов
/ 12 марта 2019

У меня есть проект activjs, в котором используется версия 4 маршрута реакции и реакция 16.3.Я могу перейти на страницу http://localhost:8000/#/my-list, где она приведет вас к компоненту MyList, в моем компоненте списка есть ссылка для просмотра одного списка, который ведет себя как SPA, изменяя состояние, как показано ниже.

import React,{Component} from 'react'

class MyList extends Component{
     constructor(props){
         super(props)
         this.state={
            canViewItem:false
         }
         this.viewItem=this.viewItem.bind(this)
     }

     viewItem(){
          this.setState({canViewItem:true})
     }
 renderDisplay() {
        const {canViewItem}=this.state
         if(canViewOrder){
            return <canViewItem cancel={this.cancel} item={item}  />
        }
        else {
            return this.renderMyList()
        }
    }

     renderMyList(){
        return(
                <table>
                    <thead>
                         <tr>
                            <th>Iten Name</th>
                            <th>Quantity</th>
                            <th>More Details</th>
                         </tr>                                 
                     </thead>
                     <tbody>                                 
                          <tr>
                              <td>Item 1</td>
                               <td>10</td>
                               <td>onClick={() => this.viewItem(item1Obj)}</td>
                          </tr>
                          <tr>
                              <td>Item 2</td>
                               <td>30</td>
                               <td>onClick={() => this.viewItem(item2Obj)}</td>
                         </tr>
                     </tbody>
                 </table> 
       }
       render(){
         return this.renderDisplay()
       }
}

Как поделиться ссылкой, чтобы она перенаправила меня на страницу товара?

1 Ответ

0 голосов
/ 12 марта 2019

Внутри componentWillMount() оцените, что передается в this.props.location.pathname.Вы должны быть в состоянии получить идентификатор # из вашего URL и обновить свое состояние.

Я не понимаю, как вы определяете в своем существующем коде, какой элемент они просматривают. 

componentWillMount() {
   let id = '';

   console.log(this.props.location.pathname);
   // write a JS function to parse the ID from the URL here and save to 'id'

   // then if you have an ID, save whatever you need to state.    
   if(id !== '') {
      this.setState({
          canViewItem: true
      });
   }
}

В качестве примечания, renderDisplay и renderMyList должны быть включены в ваш конструктор.

...