是否可以訪問 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> )