Question

我正在使用react-bootstrap-table2和typescript。我有一个称为<Table>的包装器组件，该组件最终将呈现<BootstrapTable>组件。

当我将expandRow属性传递给我的包装器组件时，将其传递给基础的<BootstrapTable>组件，当单击行时，它根本不起作用。而且我在控制台中看到此错误。

未捕获的不变违规：对象作为React子元素无效（找到：带有键{状态，类型，注释}的对象）。如果你想呈现儿童的集合，请改用数组。

// does not work
// when passed as prop
const expandRow = {
    renderer: (row: any) => (<h3>Expanded content</h3>)
}
//Wrapper component
<Table expandRow={expandRow} />
...
export class Table extends React.Component {
    render(){
         ....
        return (
             <BootstrapTable ... expandRow={this.props.expandRow} />
        )
    }

...
}

但是，相反，当我在包装器组件中定义expandRow并作为prop传递给<BootstrapTable>时，它起作用了。

// works
<Table />
...
export class Table extends React.Component {
   render(){
       const expandRow = {
          renderer: (row: any) => (<h3>Expanded content</h3>)
       }
       return (
          <BootstrapTable ... expandRow={expandRow} />
       )
   }
}

这是怎么回事？

作为道具传递的扩展行无效

0 个答案: