Question

我有以下代码：

TableWrapper.jsx

const TableWrapper = props => {
    return (
      <div>
        {props.table}
      </div>
    );
}

然后在Foo.jsx中使用它

export class FooTable extends React.Component {
  render() {
    return (
      <div>
        <TableWrapper
          table={<ListTable />}
        />
      </div>
    );
  }
}

这里是ListTable.jsx

  render() {
    const {data, error, asyncStatus} = this.props.instanceList;
    return (
      <div>
        <CustomTable
           title='123'
        />
      </div>
    )
  }

我用玩笑和酵素进行其中一项测试：

    it('Simulate search input field', () => {
      const container = mount(<FooTable {...mockProps} />);
    });
  });

我得到了

   console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Invariant Violation: TableWrapperComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

如果我使用shallow，我不会出错。我想念什么？

Answer 1

您应该使用render，然后将组件放入渲染道具中。

<TableWrapper render={table => <ListTable props={...this.props} />} />

现在，我将问您在ListTable中使用的CustomTable在哪里？在某个时候，您将不得不制作一个初始组件或使用众多库中的一个。

const myGenericComponent = (props) => {  
 // create variables deconstruct props as you like
const name = props.name 
    return (
// assuming I passed in name from my parent component as one of my props
      <div><table><th>Table {name}</th><td>{name}</td></table>
  )  
}
export default myGenericComponent;

ReactJS：测试HOC组件时，渲染未返回任何内容

1 个答案: