Question

我面临以下困难：

我想将附加到图库缩略图的锚点转换为链接，让react-router控制渲染过程并避免刷新所有页面。

困难在于我目前正在使用查询字符串?parte={index}来指示我想在场景中显示的文件。

我认为用图片更好地解释一下：

它目前有效，因为所有页面重新加载和场景组件从网址获取页面参数并加载场景中的正确文件。

然而，应该有一种方法可以做得更好，我想使用Link标签。

目前，图库代码为：

Gallery.js

import React, {Component} from 'react';
import head from '../atlas/json/cabeza.json';


export default class Gallery extends Component {
    render() {
        return (
            head.map((headPart, index) => {
                return <div key={index}>
                    <a href={`?parte=${index}`}>
                        <img
                            className='miniature'
                            src={headPart.miniatura}
                        />
                    </a>
                </div>
            })
        );
    };
};

呈现场景的组件是：

SceneSubject.js

import NRRDLoader from "../../loaders/NRRDLoader";
import cabeza from '../../atlas/json/cabeza.json';

export default (scene, originalNrrd) => {

    const parte = getParameterByName('parte') || 0;

    // console.log(originalNrrd);
    let loader = new NRRDLoader();
    const filename = originalNrrd ? cabeza[parte].original : cabeza[parte].segmentado;
    loader.load(filename, function (volume) {

        //z plane
        let sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));

        scene.add(sliceZ.mesh);
    });

    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    function update(time) {

    }

    return {
        update
    }
}

我尝试用以下代码替换a标签：<Link to={?parte=${index}}/> 它会根据需要更改URL，但由于整个页面没有重新加载，因此SceneSubject组件不知道此更改，也不会重新渲染新场景。

目前，该架构可以解释如下：

index.js
  Header
  Main --> Router
    CoverPage
    ScenePage
      Gallery
      SegmentsList
      TwoNrrdCanvas
        NrrdCanvas
          threeEntryPoint
            SceneManager
              SceneSubject

我想知道是否有一种机制让SceneSubject知道URL参数已被更改，如果它确实更改了加载正确的文件。

感谢您的帮助。

我也读过：

How to convert html to jsx whilst also converting <a> tags to <Link> tags

In React.js how do you create a link to change the active tab using react-bootstrap?

React Router v4 How to <Link> replace only when pathname change

在React中替换by链接

0 个答案: