Question

我有这段代码

  render() {
    const { schools, currentSchool, claims } = this.state;
    let loggedIn = this.state.loggedIn ? true : false;
    let user = this.state.user;

      var children = React.Children.map(this.props.children, function (child) {
         return React.cloneElement(child, {
             **claims: this.state.claims**
          })
  })
    return (
      <div>
        <HeaderContainer
           user={user}
           claims={claims}
           onLogin={this.onLoginButtonClick} />

        { loggedIn && <NavContainer claims={claims}/> }

          {children}     

        <Footer/>
      </div>
     )
    }
  }

但是，由于某种原因，我无法访问this.state.claims＆＃34;这个＆＃34;未定义。为什么这样，我该如何解决这个问题？

Answer 1

有两种方法可以实现这一点，在渲染函数中使用= this let that = this; 然后在函数而不是this.state.claims中使用：

return React.cloneElement(child, {//use that variable here } )

或通过使用箭头功能

实现此目的的另一种方式

var children = this.props.children.map(child => { return React.cloneElement(child, { **claims: this.state.claims** })

javascript是关于范围的，javascript中的变量是函数作用域而不是块作用域。在javascript中阅读有关范围的更多信息。

React clone children＆amp;附加道具不起作用

1 个答案: