是否可以访问 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>
    );
};

};

I want to use the onClick actions in another component, but I am unsure how to access the functions that would update the grid in this component. I thought about a callback function, but when I send this component and the newly created callback to the main index the button div is rendered twice because it's returned in the first instance. I'm still learning React, I'm mainly familiar with Python. Any help appreciated, thank you!

This is what I used for the callback function.

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

Can You try this

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> )