将状态向下传递到子组件的 prop 中，并通过“(this.props.(propHere))”

Question

我有一个父组件，其状态带有主题字符串。（目前仅用于测试目的，因此请不要对它的实用性考虑太多:)！）基本上，这是迄今为止的布局。父组件携带主题的状态。父组件使用代码“theme={this.state.theme}”将当前状态作为“theme”属性传递给子组件。尝试将子元素样式设置为内联style={{ background: this.props.theme === "light" ? "#fff" : "#000" }}得到错误：TypeError: Cannot read property 'props' of undefined。我知道这是因为“这个”是如何绑定的。然而，最好的方法是什么？我希望子元素与父组件的状态匹配，但我需要正确绑定“this”。

Answer 1

看来您正在为未分配的子元素使用功能组件this，请尝试更改为

                     //remove the `this`

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

Answer 2

我知道这个问题已经得到解答，但这里有一个提示。当你有一个函数组件时，你可以像这样访问 prop：

someRandomFunc = ({props}) => {

return(

<Text

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

}

);

如果它是一个类组件。您可以直接使用this.props：

class Something extends React.Component{

state = {}

    render(){

return(

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

)

    }

}

希望这对将来有帮助！