Как получить доступ к позиции элемента, используя «имя»? - PullRequest
Новая
       10

Как получить доступ к позиции элемента, используя «имя»?

0 голосов
/ 10 марта 2020

Я пытался сделать это с именем, как это было возможно в обычном html, однако в реакции это решение не работает. 

 <Route exact path={"/:category/"} component={CarCategory} />
 <Route exact path={"/:category/:car"} component={OneCarPage} />

Обр, из которого я получаю данные для сопоставления: 

const car1 = {
    carName: 'car-name-1',
    cat: 'VAN',
    vin: '31321414124214',
    photo: [1,2,3,4,5]
};

const car2 = {
    carName: 'car-name-1',
    cat: 'SUV',
    vin: '31321414124321',
    photo: [1,2,3,4,5]
};

const carAll = [car1, car2, car3];

Компонент со всеми автомобилями, где каждый находится друг под другом, я хотел бы определить их положение, чтобы быть возможность вернуться точно в то же место, где я оставил 

class CarCategory extends Component{

    render() {

        const { category } = this.props.match.params;
        const link = `${category}`;
        let sortCar = carAll.filter( el => el.cat === category );

        return(
            <>     <section className='cars-section'>
                <div className='container'>
                    <Helmet>
                        <title>{category}</title>
                    </Helmet>
                    <h1 className='head-text-category-mobile'>{category}</h1>
                    <div className='cars-gallery-container'>
                        {
                            sortCar.map(el => {
                                {
                                    return(<React.Fragment key={el.vin}>
                                            <div className='one-car-container'>
                                                <Link name={el.carName} to={link + el.carName}> /*
I'm trying to use name as the exact point to which I can go back*/
                                                    <div className='car-div'>
                                                        <div className='car-name'>{el.carName}</div>
                                                        <CarPhoto el={firstPhotoOnly} />
                                                    </div>
                                                </Link>
                                            </div>
                                        </React.Fragment>
                                    )
                                }
                            })
                        }
                    </div>
                </div>
            </section>
            </>
        )
    }
}

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

class OneCarPage extends Component{
    render() {

        const { car, category } = this.props.match.params;
        let sortCar = carAll.filter(el => el.cat === category);

        return (
            <div className='car-one-page'>
                <div className='cars-gallery-container'>
                    {
                        sortCar.map( (el, index) => {
                            if (el.carName === car){
                                return(<React.Fragment key={el.vin}>
                                        <Helmet>
                                            <title>{el.carName}</title>
                                        </Helmet>
                                        <div className='container-category'>
                                            <div className='comeback-button'>
                                                <Link to={category + '#' + el.carName}>Return</Link>
                                            </div> 
{/*at this point I want to return to the entire list of cars, to the exact position of the car in which I click return*/}
                                        </div>
                                        <div className='one-car-container'>
                                            <div className='car-name'>{el.name}</div>
                                            <CarPhoto el={el} />
                                            <CarDescription el={el}/>
                                        </div>
                                    </React.Fragment>
                                )}
                        })
                    }
                </div>
            </div>
        )
    }
}

Извините за мой английский sh и я надеюсь, что кто-то понимает и знает, как мне помочь.

...