将 state 传递到子组件的 prop 中，使用“(this.props.(propHere))”内联访问它，由于“This”而未定义

Question

I have a parent component with a state which carries a theme string. (It's just for testing purposes at the moment so don't think too far into the practicality of it please:) ! )

Basically, this is the layout thus far.

Parent Component carries state of Theme.

Parent passes down current state to child component as "theme" prop using code "theme={this.state.theme}".

Trying to style child element inline with

style={{ background: this.props.theme === "light" ? "#fff" : "#000" }}

Getting the error: TypeError: Cannot read property 'props' of undefined .

I know this is because of how "this" is bound. However, what is the best approach for this?

I want the child element to match the state of the parent component but I need "this" bound correctly.

Answer 1

It seems that you are using a functional component for the child element which doesn't have this assigned, try changing to

                     //remove the `this`
style={{ background: props.theme === "light" ? "#fff" : "#000" }}

Answer 2

I know that the question is already answered but heres a tip. When you have a function componenent, you can access the prop like this:

someRandomFunc = ({props}) => {

return(
<Text
style={{ background: props.theme === "light" ? "#fff" : "#000" }}>HELLO WORLD</Text>
}
);

If its a Class component. You can directly use this.props :

class Something extends React.Component{

state = {}

    render(){
return(

<Text style={{ background: this.props.theme === "light" ? "#fff" : "#000" }}></Text>

)
    }
}

Hope this helps in the future!