使用 React Native 将 props 从子函数传递到父函数

Question

Within Session() I want to access stateABC, which is in Item5().

The setup of my code looks like this:

Session.js:

function Session() {
//get handleRender(item).props.stateABC here
    return (
        <View>
            {handleRender(item)}
        </View>
    );
}

handleRender.js:

export function handleRender(item) {

    if(item == "Item5"){
        return (
                {Item5()}
            );
    }
}

Item5.js:

 export function Item5() {
    
        const [stateABC, setStateABC] = useState("123"); 
    
        return (
                    ....
                );
    }

I tried to get the value in Session() by using handleRender(item).props.stateABC, but all I get is an empty value.

Is it possible to receive properties from a function like that or are props only accessible in class components?

Any help is appreciated.

Thanks

Answer 1

If you need to access to stateABC value from Session component you have to pass a callback prop down from Session to Item5 and call it every time you update stateABC with setStateABC , passing the new value to the callback.

This is the simplest approach, you could also use React Context API or even something like Redux if you think that your app will grow in complexity.

Also, the approach that you tried to use is a bad idea. It works only in class component but in any case you should not use it, it's a bad thing to access props directly.