小编jun*_*n-k的帖子

我有一个关于 React 函数式组件的问题，特别是关于函数式组件中的函数。例如：

import React, { useEffect } from 'react';

const Component = (props) => {  
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
  });
  useEffect(() => {
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  function handleScroll() {
    let scrollTop = window.scrollY;
  }


  return ()
}

我想将一个 json 数据映射到一个新的 javascript 对象，如下所示。这里的 json 数据是动态的，可以有更多的文件和更多的用户。群组信息是新的，依赖于父子信息。有人可以帮我吗？感谢您的时间。

前：

{
  "userinfo": {
    "/home/user/main/sub/info/1stfile.txt": {
      "John": "something",
      "Mike": "something",
      "Merry": "something",
      "Susan": "something"
    },
    "/home/user/main/info/2ndfile.txt": {
      "Mulan": "something",
      "James": "something"
    },
    "/home/user/main/info/3rdfile.txt": {
      "Nancy": "something"
    },
    "/home/user/main/4thfile.txt": {
      "Kamal": "something",
      "Xian": "something",
      "Mila": "something"
    }
  }
}

后：

{
  "name": "main",
  "children": [
    {
      "name": "1stfile",
      "children": [
        {
          "name": "John",
          "group": "1"
        },
        {
          "name": "Mike",
          "group": "1"
        },
        {
          "name": "Merry",
          "group": "1"
        },
        {
          "name": "Susan",
          "group": "1"
        } …

我想自定义文件上传的输入标签。这是我的代码。这里对于属性 htmlFor，我给出了输入标签的 id。然后它就可以工作了。但是我想使用 useRef ref。我怎样才能做到这一点 ？如果我按照下面的方法，如果我多次渲染这个组件就会有问题。对 ？

const App = () => {
  const inputRef = useRef(null);
  const [file, setFile] = useState(null);
  return (
    <>
      <input
        ref={inputRef}
        accept=".pdf"
        style={{ display: "none" }}
        id="raised-button-file"
        multiple
        type="file"
        onChange={e => {
          setFile(e.target.files[0]);
        }}
      />
      <label htmlFor="raised-button-file">
        <button component="span">
          <span>file</span>
        </button>
      </label>
    </>
  );
};