Javascript 反应挂钩D3和同位素库拥有状态_Javascript_Reactjs_D3.js_React Hooks_Jquery Isotope

Javascript 反应挂钩D3和同位素库拥有状态

javascript reactjs d3.js

Javascript 反应挂钩D3和同位素库拥有状态,javascript,reactjs,d3.js,react-hooks,jquery-isotope,Javascript,Reactjs,D3.js,React Hooks,Jquery Isotope,我正在尝试重构现有代码，以使用钩子而不是构造函数componentDidMount（）、componentDidUpdate（）。我下面的原始代码做得很好： import React from "react"; import '../css/App.css'; import 'jquery/dist/jquery.js'; import Isotope from 'isotope-layout/dist/isotope.pkgd.min.js'; import proje

我正在尝试重构现有代码，以使用钩子而不是构造函数componentDidMount（）、componentDidUpdate（）。我下面的原始代码做得很好：

import React from "react";
import '../css/App.css';
import 'jquery/dist/jquery.js';
import Isotope from 'isotope-layout/dist/isotope.pkgd.min.js';  
import projectsData from '../data/projectsData';
import Project from './Projects';

    class App extends React.Component {

  constructor(props){
    super(props);
    this.state = { 
      isotope: null,
    projectComponents: projectsData.map(project => <Project id={project.id} project={project}/>),
  }
 }

  componentDidMount() {

    //load isotope masonry view
    const elem = document.querySelector('#visContainer')
    if (!this.state.isotope) {
      this.setState({
        isotope: new Isotope( elem, {
          //options
          itemSelector: '.gridItem',
          layoutMode: 'masonry',
          masonry: {
            columnWidth: 140,
            fitWidth: true
          },
          getSortData: {
            year: '.yearsstart parseFloat',
            kind: '.kind'
          }
        })
      });
    }
    else {
      this.state.isotope.reloadItems();
    }
  }
  }
    componentDidUpdate() {
      if (this.state.isotope) {
        this.state.isotope.reloadItems();
        this.state.isotope.layout();
      }
    }
  render(){


    return (
      <body>
        <div id='sepLine'>
        <div id="visHolder">
           <div id="visContainer" style={{position: "relative", width: "840px", height: "1823px"}}>
             {this.state.projectComponents} 
           </div>           
         </div>
       </div>
      </body>
    );
  }
 
}

export default App

从“React”导入React；
导入“../css/App.css”；
导入“jquery/dist/jquery.js”；
从“同位素布局/dist/同位素.pkgd.min.js”导入同位素；
从“../data/projectsData”导入projectsData；
从“./Projects”导入项目；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
同位素：空，
projectComponents:projectsData.map（project=>），
}
}
componentDidMount（）{
//荷载同位素砌体视图
const elem=document.querySelector（“#visContainer”）
如果（！this.state.同位素）{
这是我的国家({
同位素：新同位素（elem{
//选择权
itemSelector:“.gridItem”，
布局模式：“砌体”，
砌体：{
列宽：140，
fitWidth：对
},
getSortData：{
年份：'.yearsstart-parseFloat'，
种类：“.种类”
}
})
});
}
否则{
this.state.同位素.reloadItems（）；
}
}
}
componentDidUpdate（）{
if（本状态同位素）{
this.state.同位素.reloadItems（）；
this.state.同位素.layout（）；
}
}
render（）{
返回(
{this.state.projectComponents}
);
}
}
导出默认应用程序

然而，我试图修改它，使用d3库，而不是映射外部组件（项目）并使用React HOOK执行此操作。我下面的内容使用d3映射数据，但我无法将同位素应用于id“粘滞剂”。我怀疑这是因为它们在使用useffect（）的同时发生：

import React，{useffect，useState}来自“React”；
导入“../css/App.css”；
导入“jquery/dist/jquery.js”；
从“同位素布局/dist/同位素.pkgd.min.js”导入同位素；
从“../data/projectsData”导入projectsData；
从“./Projects”导入项目；
函数应用程序（）{
常量[同位素，Set同位素]=useState（空）；
useffect（（）=>{
const projects=d3.选择（“#visContainer”）；
项目
.selectAll（“.lineDiv”）
.数据（项目数据）
.输入（）
.append（'div'））
.attr（'id'，（d，i）=>{
返回d.title}）
.attr（'className'，d=>{
返回'lineDiv gridItem y'+d.start.substring（0,4）+''+d.kind++''+d.title++''+d.subtitle.replace（/，/g'）；
})
}, []);
useffect（（）=>{
const elem=document.querySelector（“#visContainer”）
SET同位素（新同位素）{
itemSelector:“.gridItem”，
布局模式：“砌体”，
砌体：{
列宽：140，
fitWidth：对
},
getSortData：{
年份：'.yearsstart-parseFloat'，
种类：“.种类”
}
})
)
},[]);
返回(
);
}
导出默认应用程序

任何帮助都将非常感谢，因为我渴望了解我能推多远。提前谢谢

我通过在带有映射的setProjects（）初始加载上使用“useffect”来解决这个问题。然后，同位素控制了“粘滞剂”和

document.querySelector('#visContainer')

const-App=（道具）=>{
const[projects，setProjects]=useState（null）；
常量[同位素，Set同位素]=useState（空）；
useffect（（）=>{
setProjects（projectsData.map（project=>））
},[])
useffect（（）=>{
const elem=document.querySelector（“#visContainer”）
SET同位素（新同位素）{
itemSelector:“.gridItem”，
布局模式：“砌体”，
砌体：{
列宽：140，
fitWidth：对
},
getSortData：{
年份：'.start parseFloat'，
种类：“.种类”
}
})
)
}，[项目]；
返回(
{项目}
);
}
导出默认应用程序；

我通过在setProjects（）的初始加载上使用“useEffect”和映射来解决这个问题。然后，同位素控制了“粘滞剂”和

document.querySelector('#visContainer')

const-App=（道具）=>{
const[projects，setProjects]=useState（null）；
常量[同位素，Set同位素]=useState（空）；
useffect（（）=>{
setProjects（projectsData.map（project=>））
},[])
useffect（（）=>{
const elem=document.querySelector（“#visContainer”）
SET同位素（新同位素）{
itemSelector:“.gridItem”，
布局模式：“砌体”，
砌体：{
列宽：140，
fitWidth：对
},
getSortData：{
年份：'.start parseFloat'，
种类：“.种类”
}
})
)
}，[项目]；
返回(
{项目}
);
}
导出默认应用程序；

const App = (props) => {
  const [projects, setProjects] = useState(null);
  const [isotope, setIsotope] = useState(null);

  
  useEffect(() => {
    setProjects(projectsData.map(project => <Project id={project.id} project={project} onClick={filterThisProject}/>))
  },[])

  useEffect(() => {
    const elem = document.querySelector('#visContainer')  
      setIsotope(new Isotope( elem, {
          itemSelector: '.gridItem',
          layoutMode: 'masonry',
          masonry: {
            columnWidth: 140,
            fitWidth: true
          },
          getSortData: {
            year: '.start parseFloat',
            kind: '.kind'
          }
        })
      )
    },[projects]);


    return (
      <body>
        <div id='sepLine'>
        <div id="visHolder">
           <div id="visContainer" style={{position: "relative", width: "840px", height: "1823px"}} >
             {projects}
           </div>           
         </div>
       </div>
      </body>
    );
}

export default App;