将状态向下传递到子组件的 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(<Textstyle={{ background: props.theme === "light" ? "#fff" : "#000" }}>HELLO WORLD</Text>});如果它是一个类组件。您可以直接使用this.props：class Something extends React.Component{state = {}&nbsp; &nbsp; render(){return(<Text style={{ background: this.props.theme === "light" ? "#fff" : "#000" }}></Text>)&nbsp; &nbsp; }}希望这对将来有帮助！