Reactjs React-您可以将状态处理程序传递到多个子组件层吗

我有一个React父组件，它保存整个应用程序的状态。我希望将函数向下传递给子组件，以便在该子组件中单击按钮时，它会更改父组件的状态。现在我可以对一层执行此操作，但是当我尝试将函数向下传递到另一层（因此子组件向下传递它作为道具接收的函数）时，我的应用程序出现以下错误：

TypeError: Cannot read property 'props' of undefined

是否可以将此功能向下传递到多个层

在我的最低级别，我没有设置构造函数，因为我认为它只是需要的，我需要在子组件中启动状态，对吗

我在下面详细介绍了我的代码的相关部分：

家长：

  class App extends Component {
  constructor() {
    super();
    this.changeDisplay = this.changeDisplay.bind(this)
    this.handleAddTicket = this.handleAddTicket.bind(this)
    this.handleDeleteTicket = this.handleDeleteTicket.bind(this)

    this.state = {...}
...
}

 handleDeleteTicket(data){
    console.log(data)

  } ....

第一个孩子

class Board extends React.Component {
return (
            <Container>
                <Row>
                    <Col sm={4}>
                        <Todo tasks={todoTasks} deleteTicket={this.props.deleteTicket}/>
                    </Col>
                </Row>
            </Container>
  )
}

类板扩展React.Component{
返回(
)
}

第二个孩子：

class Todo extends React.Component {
render() {
todoTicketsAr = this.props.tasks.map(function (obj, i) {
                return <Ticket key={i} data={obj} deleteTicket={this.props.deleteTicket}></Ticket>
            })
        }

        return (
            <div>
                <h2>To do:</h2>
                {todoTicketsAr}
            </div>
                )
    }

类Todo扩展React.Component{
render（）{
todoTicketsAr=this.props.tasks.map（函数（obj，i）{
返回
})
}
返回(
要做：
{todoTicketsAr}
)
}

---

所以我在父级绑定这个，而不是其他级别，对吗？

唯一会发生的情况是因为

这个

不再正确绑定。我可以给出的一个常见情况是：

系统将抛出一个错误

class App extends Component {
     someClickHandler() {
         /** 
          * This line will throw an error onClick 
          * of the button because `this` is not bound to the right thing.
          * If you log out `this` you'll probably see the click event object. 
          */
         console.log(this.state); 
     }
     render() {
          return (
              <button onClick={this.someHandler}>Random button</button
          )
     }
}

---

下面是一个如何使用道具钻取和上下文API的示例。我将使用ContextAPI示例，因为当需要在不同组件中使用状态的不同部分时，不需要继续钻取

我还提供了一个支柱钻井的例子，如果你想看到它的工作，并比较两种解决方案

React上下文API示例

const Global=React.createContext（{}）；
类存储扩展了React.Component{
静态消费者=全局消费者；
状态={
价值：“培根”，
};
changeValue=（value）=>this.setState（{value}）；
render（）{
const{value}=this.state；
const{changeValue}=这个；
返回(
{this.props.children}
)
}
}
子类扩展了React.Component{
状态={
文本：“”，
};
handleChange=（evt）=>this.setState（{text:evt.target.value}）；
render（）{
const{text}=this.state；
const{handleChange}=这个；
返回(
{（{value，changeValue}）=>(
值为{Value}
键入新值并提交
changeValue（文本）}>提交
)}
)
}
}
常量布局=（）=>(
未向上下文公开的示例组件
)
常量Main=（）=>(
React上下文API示例
);
render（，document.body）

这应该是可能的。你能发布你的代码吗？是的，这是可能的，它被称为“支柱钻井”。React的新上下文API也应该对您有所帮助，它做您正在做的事情，但允许您跳过所有中间组件。对于您的特定问题，您必须发布相关代码，根据给出的信息很难说。谢谢你们，我已经在编辑中添加了一些代码片段，希望这些片段足以解释发生了什么。@Steve关于如何解决您的问题的示例已在下面提供。谢谢，我会尝试一下！
<button onClick={() => this.someHandler()}>Random button</button>

// or

<button onClick={this.someHandler.bind(this)}>Random button</button>