reactjs，从第三个组件传递功能

Question

我有这个BarsGenerator组件

const BarsGenerator = () => {
const { sliderValue } = useContext(GlobalState); // get slider value from global state
const [bars, setBars] = useState<number[]>([]);
useEffect(() => {
const randomArray = RandomNumberGenerator(sliderValue!, 10, 200);
setBars(randomArray);
}, [sliderValue]);
const barsList = bars.map((bar, index) => {
return <Bar key={index} height={bar} value={`${bar}`} />
});
return (
<div style={{ marginTop: "70px" }} className="bars-container">
{barsList}
</div>
);

以及边栏组件

const Sidebar = () => {
return (
<div className="sidebar">
<div className="sidebar-header">
<h4>CONTROLS</h4>
<hr style={hrStyles.hrStyle_one} />
</div>
<div className="sidebar-content">
<div className="sidebar-content-item">
<h6>ALGORITHM</h6>
<Selectbox />
<hr style={hrStyles.hrStyle_two} />
<h6 style={{ marginTop: "20px" }}>SLIDERS</h6>
<div className="sliders">
<Slider />
</div>
<div className="sliders">
<Slider />
</div>
<hr style={hrStyles.hrStyle_two} />
<Button name='Sort' />
<Button name='Generate' />
</div>
</div>
</div>
)}

我想创建一个新组件，从中我可以将已经创建的排序函数传递给上面sidebar组件中的Button组件。

但我不知道该怎么做，也不知道这是否可能。

Answer 1

怎么样？

const NewComponent = () => {
const sort = () => {
// sorting
};
const generate = () => {
// generating
};
return(
<React.Fragment>
<Button name='Sort' onPress={sort} />
<Button name='Generate' onPress={generate} />
</React.Fragment>
);
};
export default NewComponent;

const Sidebar = () => {
return (
<div className="sidebar">
<div className="sidebar-header">
<h4>CONTROLS</h4>
<hr style={hrStyles.hrStyle_one} />
</div>
<div className="sidebar-content">
<div className="sidebar-content-item">
<h6>ALGORITHM</h6>
<Selectbox />
<hr style={hrStyles.hrStyle_two} />
<h6 style={{ marginTop: "20px" }}>SLIDERS</h6>
<div className="sliders">
<Slider />
</div>
<div className="sliders">
<Slider />
</div>
<hr style={hrStyles.hrStyle_two} />
<NewComponent />
</div>
</div>
</div>
)}

更新

请根据您的需求进行调整

上下文文件

import {createContext} from "react";
export const GlobalState = createContext({
bars: [],
setBars: () => {
},
getBars: () => {
}
});

自定义挂钩文件

import {useState, useEffect, useCallback} from "react";
export const useBars = () => {
const [bars, setBars] = useState([]);
const setBars = useCallback((bars) => {
setBars(bars);
}, []);
const unsetBars = useCallback(() => {
setBars([]);
}, []);
return {bars, setBars, unsetBars}
};

应用程序文件

import {useBars} from "./shared/hooks/bars-hook"; //custom hook file
const App = () => {
const {bars, setBars, unsetBars} = useBars();
//your other code
//your other code
//...
return (
<AuthContext.Provider
value={{/* your other code */bars: bars, setBars: setBars, unsetBars: unsetBars}}
>
{/*your other code*/}
</AuthContext.Provider>
}

BarsGenerator文件

//your other code
import {GlobalState} from "../../shared/context/bars-context"; //context file
//your other code
const BarsGenerator = () => {
const bars = useContext(GlobalState);
//your other code
useEffect(() => {
const randomArray = RandomNumberGenerator(sliderValue!, 10, 200);
setBars(randomArray);
//add this one
bars.setBars(randomArray);
//add this one
}, [sliderValue]);
//your other code
};

新组件文件

import {GlobalState} from "../../shared/context/bars-context"; 
const NewComponent = () => {
const bars = useContext(GlobalState);
const sort = () => {
// sorting
// NOW YOU CAN USE THIS -> bars.bars
};
const generate = () => {
// generating
};
return(
<React.Fragment>
<Button name='Sort' onPress={sort} />
<Button name='Generate' onPress={generate} />
</React.Fragment>
);
};
export default NewComponent;