将函数作为道具传递给 React 中的子组件会抛出错误

Question

在 React 中将回调作为 props 传递给子组件时是否有任何特定的指导方针？

有时我的代码 ina app.js 如下所示：

test() {
  
}
  render(){
  return (
    <div className="App">
      <MiniDrawer handleProductChange={this.handleProductChange.bind(this)} product={{icon:'', name:'Magnifier', height:'20px'}}/>
      <div className='inrow'> 
      <PowerbiEmbedded
          id={this.state.ReportId}
          embedUrl={"https://app.powerbi.com/reportEmbed?reportId="+this.state.ReportId+"&groupId="+this.state.workspaceId}
          accessToken={this.state.accesstoken}
          filterPaneEnabled={true}
          navContentPaneEnabled={true}
          bookmarksPaneEnabled={true}
         test={() => this.test}
          //pageName={`${YOUR_PAGE_ID}`}
          //embedType={`Report`}
          tokenType={0}
          width='100%'
          height='1000px'
        />
    </div>
    </div>
    
  );}

MiniDrawer 组件没有发出 handleProductChange 回调的任何问题信号。虽然我试图传递给 PowerBiEmbedded 组件的简单回调失败并出现错误：

DataCloneError：无法在 'Window' 上执行 'postMessage'：() => this.test 无法克隆。我设法提取了问题的根源。子组件内部有一个函数使用带有 Object.assign 的 props。如果我注释掉这个函数错误就会消失。我该怎么办？

updateState (props) {
    const nextState = Object.assign({}, this.state, props, {
      pageName: this.props.pageName,
      settings: {
       /* panes:{
          bookmarks: {visible: this.props.bookmarkPaneEnabled},
          filters: {visible: this.props.filterPaneEnabled},
          pageNavigation: {visible: this.props.navContentPaneEnabled}
        },*/
        filterPaneEnabled: this.props.filterPaneEnabled,
        navContentPaneEnabled: this.props.navContentPaneEnabled,
        bookmarkPaneEnabled: this.props.bookmarkPaneEnabled,
        layoutType: this.props.mobile ? pbi.models.LayoutType.MobilePortrait : undefined
      },
      type: this.props.embedType ? this.props.embedType : 'report'
    })

知道我在这里遗漏了什么吗？

Answer 1

我认为你需要在像这样将回调作为 prop 传递时省略箭头函数

test={this.test}

Answer 2

我认为您需要绑定函数，因为您使用的是 class，试试看：

test={test.bind(this)}

Answer 3

好的。找到了解决方案。由于某种原因，对象分配方法无法复制反应回调“[native code]”问题。我会让纯粹主义者就此进行辩论。我不需要这个新对象中的回调，因为它会被进一步传递，并且它打算具有其他属性，我只是自己克隆道具并在示例中删除了函数（“zonk”）。显然，这可以扩展为验证 typeof 键，使其更通用。

updateState (props) {
  var distilledProps = _objectWithoutProperties(props, ['zonk'])
  console.log(distilledProps)
    const nextState = Object.assign({}, this.state, distilledProps, {
      pageName: this.props.pageName,
      settings: {
       /* panes:{
          bookmarks: {visible: this.props.bookmarkPaneEnabled},
          filters: {visible: this.props.filterPaneEnabled},
          pageNavigation: {visible: this.props.navContentPaneEnabled}
        },*/
        filterPaneEnabled: this.props.filterPaneEnabled,
        navContentPaneEnabled: this.props.navContentPaneEnabled,
        bookmarkPaneEnabled: this.props.bookmarkPaneEnabled,
        layoutType: this.props.mobile ? pbi.models.LayoutType.MobilePortrait : undefined
      },
      type: this.props.embedType ? this.props.embedType : 'report'
    })

...和辅助函数：

function _objectWithoutProperties(obj, keys) {
  var target = {};
  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
    target[i] = obj[i];
  }
  return target;
}

将函数作为道具传递给 React 中的子组件会抛出错误

passing function as a prop to child component in React throws error

javascript

callback

reactjs

react-props