javascript - 是否可以在 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> )

标签： javascriptreactjsfunction

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