Можно ли получить доступ к функции вне компонента в React?

Question

const MainContainer = () => {

    const muuriRef = useRef();

    // Items state
    const [items_ig, setItems_ig] = useState(generateInstaContainer());
    const [items_fb, setItems_fb] = useState(generateFbContainer());
    const [items_twit, setItems_twit] = useState(generateTwitterContainer());

    // Items as children


    const children_ig = items_ig.map(({id, color, title, width, height}) => (
        <Item_IG
            id={id}
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
            remove={removeFunction_ig}
        />
    ));

    const children_fb = items_fb.map(({id, color, title, width, height}) => (
        <Item_FB
            id={id}
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
            remove={removeFunction_fb}
        />
    ));

    const children_twit = items_twit.map(({id, color, title, width, height}) => (
        <Item_TWIT
            id={id}
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
            remove={removeFunction_twit}
        />

    ));

    function addInstaGram() {
        setItems_ig(items_ig.concat(generateInstaContainer(1)));
    }

    function addFacebook() {
        setItems_fb(items_fb.concat(generateFbContainer(1)));
    }

    function addTwitter() {
        setItems_twit(items_twit.concat(generateTwitterContainer(1)));
    }

    // render
    return (
            <MuuriComponent
                options={{
                    layoutDuration: 400,
                    layoutEasing: "ease",
                    dragEnabled: true,
                    dragSortInterval: 50,
                    dragReleaseDuration: 400,
                    dragReleseEasing: "ease"
                }}
                ref={muuriRef}
            >
                {children_ig}
                {children_fb}
                {children_twit}
            </MuuriComponent>

            <div className="test"><Button
                onClickF={() => addFacebook()}
                onClickT={() => addTwitter()}
                onClickI={() => addInstaGram()}


            /></div>
    );
};

};

Я хочу использовать действия onClick в другом компоненте, но я не уверен, как получить доступ к функциям, которые будут обновлять сетку в этом компоненте. Я думал о функции обратного вызова, но когда я отправляю этот компонент и вновь созданный обратный вызов в основной индекс, кнопка div отображается дважды, потому что она возвращается в первом случае. Я все еще изучаю React, я в основном знаком с Python. Спасибо за любую помощь, спасибо!

Это то, что я использовал для функции обратного вызова.

const Button = ({onClickI, onClickT, onClickF}) => {
    return ( <div className={someStyles}>
        <button onClick={onClickI}>Test 1</button>
        <button onClick={onClickT}>Test 3</button>
        <button onClick={onClickF}>Test 2</button>
    </div> )

Answer 1

Можете ли вы попробовать это

const Button = ({onClickI, onClickT, onClickF}) => {
        return ( <div className={someStyles}>
            <button onClick={() => onClickI()}>Test 1</button>
            <button onClick={() => onClickT()}>Test 3</button>
            <button onClick={() => onClickF()}>Test 2</button>
        </div> )