Question

正如标题所说，我需要访问所有孩子的地图功能的每个child元素，React.Children.map(this.props.children, (child)...

我需要这个，因为我想有条件地渲染某些道具，并根据某些条件阻止渲染，具体取决于此刻正在渲染的孩子。

我已在构造函数

中绑定了此函数

this.renderChildren = this.renderChildren.bind(this);

但它仍然无效。我甚至可以让这个map函数工作的唯一方法是将它包装在return()函数中。有什么想法吗？

renderChildren(funcs) {
    // debugger
    return (
      React.Children.map(this.props.children, (child) => {
        debugger // *** Need to access `this.state` from in here ***
        return React.cloneElement(child, {
          state: this.state,    // ***  Need access here too
          callbackFuncs: funcs
        })
      })
    )
  }

...

return(<div>{this.renderChildren(callbacks)}</div>)

以下内容无效（未包含在回复中）

renderChildren(funcs) {
    React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, {
        state: this.state,    
        callbackFuncs: funcs  
      })
    })
  }

Answer 1

你是对的，你需要将map包裹在return ( ... )的{{1}}中。

执行此操作renderChildren如果return(<div>{this.renderChildren(callbacks)}</div>)未返回任何内容，则renderChildren(callbacks)将为空。

解决您的问题，而不是在构造函数中绑定{this.renderChildren(callbacks)}

在构造函数中删除此行this

更改

this.renderChildren = this.renderChildren.bind(this);

到

renderChildren(funcs) {
// debugger
return (
  React.Children.map(this.props.children, (child) => {
    debugger // *** Need to access `this.state` from in here ***
    return React.cloneElement(child, {
      state: this.state,    // ***  Need access here too
      callbackFuncs: funcs
    })
  })
)
}

然后您可以根据需要在闭包中访问renderChildren = (funcs) => { // debugger return ( React.Children.map(this.props.children, (child) => { debugger // *** Need to access `this.state` from in here *** return React.cloneElement(child, { state: this.state, // *** Need access here too callbackFuncs: funcs }) }) ) }

Answer 2

我明白了。首先，必须使用npm安装here

将transform-class-properties添加到我的.babelrc文件中

然后，我像上面提到的箭头函数一样自动调整它，但我仍然无法从.map函数内部访问我的状态。我最终找到了这个Github问题，Here

那就是用map map函数绑定函数和第二个arg，我做了，而不是它的工作原理。这是修订版......

 renderChildren = (funcs) => {
    return (
      React.Children.map(this.props.children, (child) => {
        return React.cloneElement(child, {
          state: this.state, 
          callbackFuncs: funcs
        })
      }, this)
    )
  };

无法从React.Children.map（）

2 个答案: