Javascript 将组件调用方法反应到其他组件

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

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

---

在React中，我如何从

组件调用此方法

allSelection

，其中我有一个简单的按钮，如

allSelection
ReactJS，它允许以不同的方式执行此场景。让我解释一下：如果您按下工具栏选择中的按钮，则将该按钮的新状态值作为道具传递给FileDropArea。然后，在FileDropArea渲染中，根据该属性的值是否调用该方法

const Upload = (props) => {
    return (
        <BaseLayout>
            <ToolbarSelection 
                 onSelectionClick={(value) => setSelected(value)}
             />
            <Box>
                <FileDropArea 
                   selected = { /* state of a button in the Toolbar */}
                />  
            </Box>           
        </BaseLayout>
    )
}

const Upload=（道具）=>{
返回(
设置选定（值）}
/>
)
}

请注意工具栏中的回调如何更改状态，以及此新状态如何作为属性传递给FileDropArea
您需要像这样使用
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 ToolbarSelection = () => {
  const {files, allSelection} = useFileContext();

  // do other stuff
}

反应钩
我假设您希望使
allSelection
函数可重用。是使逻辑在组件间可重用的好方法

创建自定义挂钩
useAllSelection
。注意，钩子应该有use前缀

const useAllSelection = (files) => {
const [files, setFiles] = useState([]);

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

  return { handleAllSelection };
};

const-ToolbarSelection=（）=>{
//导入钩子并使用
const{handleAllSelection}=useAllSelection（）；
返回(
所有选择
)
}
准确地从哪个组件调用它？你的按钮在哪里？按钮在中，正确的方法在@Koala7中。你尝试过我的解决方案吗？我现在正在用自定义挂钩尝试第一个解决方案，虽然我有一个错误，但很明显，然后我用react Context尝试你的解决方案。当然，我感谢你的时间和努力，这真的很复杂，这不是反应方式。如果您需要一个组件来运行一段代码，只需正确更新道具，您的组件将被重新渲染并运行代码。ContextProviders旨在提供对常用功能的访问，但这不是您的第一个案例，您能礼貌一点吗？第二，也是同样，React上下文并不是用于此目的的。再读一遍这个问题，不要思考它所想的解决方案，而是思考它的问题。这是React应用程序的常见场景：更新组件并以另一种方式运行一些代码。解决这个问题的方法是正确使用状态和道具。@Andrés所以你决定了
的反应方式
当有人告诉你你错了，你的感觉就会受到伤害。你能告诉我，
React Context
的目的是什么吗？
React Context
只是一个工具。在解决问题时，你必须选择最适合你的问题的工具。很可能有几个人可以很好地工作，但要付出代价。为此使用ReactContext：1）比需要的更复杂，2）当应用程序变得更大时，您将得到大量嵌套上下文。你明白了吗？顺便说一下，我只是从技术角度回答，没有感觉。唯一生气的人是你。拿着easy@Andr我是从技术的角度告诉你的。你在这里看到了一半的画面。阅读他的最后一个问题，你就会明白为什么使用
上下文
是一个更好、更干净的选择。你只是没有给出一个完整的答案，不知道整个情况，然后在这里把你的观点或你的编码风格概括为什么是反应方式，什么不是。这太天真了。我知道还有另一种方法可以将状态提升一级
setFiles
in
allSelection
函数是
useState
hook@TaghiKhavari知道了。

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

  // do other stuff
}

const useAllSelection = (files) => {
const [files, setFiles] = useState([]);

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

  return { handleAllSelection };
};

const ToolbarSelection = () => {
  // import the hook and use
  const { handleAllSelection } = useAllSelection();

  return (
    <button onClick={handleAllSelection}>All Selection</button>
  )
}