Блог

я был новичком в js, это мой app.js и я создал компонент дерева, который может выбирать файл jpg для отображения в моем компоненте pic, я попытался использовать state и callbackfunction, поэтому я использую ant-designe для своего дерева, а компонент изображения выше — мой основной компонент приложения #извините за мой плохой английский #спасибо

 import React, { Component } from 'react'
import Tree from './Treeapp';
import Pic from './submitapp';
import './App.css';
//window.a="/google landmark/test/0/0/0/00084cdf8f600d00.jpg";
class App extends Component { 
    constructor(props){
      super(props);
      this.state={
        path:" "
      }
    }
    changestate=(answer)=>{
      this.setState({answer: answer})
    }
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
                <Pic path={this.state.path}/>
                <Tree nextstate={this.changestate.bind(this)}/>
          </p>
        </div>
      )
  }
}

export default App
  

мой компонент дерева

 import { Tree } from 'antd';
import React  from 'react';
import 'antd/dist/antd.css';
const { DirectoryTree } = Tree;
const treeData = [
  {
    title : 'index',
    key : '/index',
    children : []
  },
  {
    title : 'test',
    key : '/test',
    children : []
  },
  {
    title : 'train',
    key : '/train',
    children : []
  }  
]
const makeTree=(item,add)=>{
  const pos = item.substring(8,11)
  const head = treeData[1];
  let children = head.children;
  if(!children.find(x=> x.title === pos[0])){
    children.push(
      {
        title : pos[0],
        key : head.key   '/'   pos[0],
        children : [],
    [enter image description here][1]  }
    )
  };
  children = children.find(x=> x.title === pos[0]).children;
  if(!children.find(x=> x.title === pos[1])){
    children.push(
      {
        title : pos[1],
        key : head.key   '/'   pos[0]   '/'   pos[1],
        children : [],
      }
    )
  }
  children = children.find(x=> x.title === pos[1]).children;
  if(!children.find(x=> x.title === pos[2])){
    children.push(
      {
        title : pos[2],
        key : head.key   '/'   pos[0]   '/'   pos[1]   '/'   pos[2],
        children : [],

      }
    )
  }
  children = children.find(x=> x.title === pos[2]).children
  children.push
  (
    {
      title : item.substring(8,item.length),
      key : head.key   '/'   pos[0]   '/'   pos[1]   '/'   pos[2]  '/'  item.substring(8,item.length),
      isLeaf : true
    }
  );
}
let r = require.context('/project/public/google landmark/test',true);
r.keys().map(item=>makeTree(item,r(item)))
//let u = require.context('/public/google landmark/train',true);
//u.keys().map(item=>makeTree(item,u(item)))
//let v = require.context('/public/google landmark/index',true);
//v.keys().map(item=>makeTree(item,v(item)))
class Demo extends React.Component {
  
  onSelect=(key)=>{
    let answer="/google landmark" key;
    //console.log(answer);
    this.props.nextstate(answer);
  };
  onExpand(){
    //console.log('Trigger Expand');
  };
  render(){
    return (
        <DirectoryTree
          multiple
          defaultExpandParent
          onSelect={this.onSelect}
          onExpand={this.onExpand}
          treeData={treeData}
        />

    )
  }
};
export default Demo;
  

мой компонент pic, у которого есть проблема

 import React from 'react';
import { Image } from 'antd';
class ImageDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      path: this.props.path // default image.
    }
  }
  render(){
        return (
            <Image
            width={200}
            height={200}
            src={this.state.path}
            />
        )
        
    }
}

export default ImageDemo;  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>  

В вашем компоненте pic попробуйте использовать prop вместо state

 import React from 'react';
import { Image } from 'antd';
export default function ImageDemo({path}){
  return (
            <Image
            width={200}
            height={200}
            src={path}
            />
        )
}