javascript - 将组件调用方法 react 到不同的组件

Question

我有一个具有以下结构的页面

const Upload = (props) => {
    return (
        <BaseLayout>
            <ToolbarSelection />
            <Box>
                <FileDropArea />  
            </Box>           
        </BaseLayout>
    )
}

我有一个在组件 <FileDropArea /> 中有效的方法
这是用作示例的方法

const allSelection = () => {
  setFiles((files) =>
    files.map((file) => {
      file.checked = true;
      return file;
    })
  );
};

在 React 中我如何调用这个方法 allSelection来自 <ToolbarSelection />组件，我有我的简单按钮，如 <Button>All Selection</Button>

Answer 1

您需要使用 React Context像这样:

//create a fileContext.js 
const fileContext = React.createContext();
const useFileContext = () => React.useContext(fileContext);
const FileContextProvider = ({ children }) => {
  const [files, setFiles] = useState([]);

  const allSelection = () => {
    setFiles((files) =>
      files.map((file) => {
        file.checked = true;
        return file;
      })
    );
  };
  // if you have other methods which may change the files add them here
  return (
    <fileContext.Provider
      value={{
        files,
        setFiles,
        allSelection,
      }}
    >
      {children}
    </fileContext.Provider>
  );
};

在上传文件中使用文件内容提供程序

const Upload = (props) => {
  return (
    <FileContextProvider>
      <BaseLayout>
        <ToolbarSelection />
        <Box>
          <FileDropArea />
        </Box>
      </BaseLayout>
    </FileContextProvider>
  );
};

使用它，例如在工具栏选择中，像这样:

const ToolbarSelection = () => {
  const {files, allSelection} = useFileContext();

  // do other stuff
}