Question

我正在尝试创建嵌套文件夹（使用CSS制成的文件夹设计），其中包含该文件夹的所有文件。而且，如果该文件没有任何文件夹，则应显示为没有文件夹。

allsrc-包含图像的斑点

nodeRes-包含来自后端nodejs服务器的文件路径   像/folder/for/file/abc.jpg

dirloc-包含具有键getpath和value文件夹路径的对象   / folder / for / file /，不包括文件名，键目录名和值文件夹   名称。

您可以看到 return 语句，所有文件都显示在文件夹内，即使该文件不在任何文件夹中也是如此。我不希望没有文件夹的任何文件显示在文件夹内。

是否有任何简便的方法，例如任何可用的文件树包，或者可以改进我的代码？

 class Load extends Component {
      constructor({props, token}) {
        super(props, token);
        this.state = { 
            isToggleOn: true,
            allsrc: ['blob:http://localhost:3001/ee2fec36-36fa-4858-8cb1-0c9d83417ace', 'blob:http://localhost:3001/cd32fb1c-b0d1-44ed-ae49-5fec1eac59a7'],
            nodeRes: '/folder/for/image/abc.jpg',
            dirloc: [ { getpath: '/folder/for/image', dirnames: 'image' },
                      { getpath: '/folder/two', dirnames: 'two' ],
        };

        this.handleClick = this.handleClick.bind(this);
      }

        handleClick() {
            this.setState({ isToggleOn: !this.state.isToggleOn})
      }

  findkeys(dirkey) {
      dirkey.map((d) => {
      return d.dirnames
    })
  }

      render() {
        const { allsrc, nodeRes, dirloc } = this.state;

         return (
             allsrc !== '' ?
                allsrc.map((p, i) => (
                  dirloc === '' ? 
                    <a style={{width: 200, height: 250}} key={nodeRes[i]} className='tc' onClick={() => { this.handleClick() }}>
                      <div id='images'>
                        <img style={{width: 175, height: 175}} className='tc' alt='robots' src={ p }/>
                      </div>
                    </a>
                    : <div className='container' key={ this.findkeys(dirloc) }> 
                      <div className="folder">
                        <div className="folder-inside">
                          <a style={{width: 200, height: 250}} key={nodeRes[i]} className='tc' onClick={() => { this.handleClick() }}>
                            <div id='images'>
                              <img style={{width: 175, height: 175}} className='tc' alt='robots' src={ p }/>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>))
                : null
                );
      }
    }

reactjs中的条件返回语句

0 个答案: