Question

这是我第一次开发React应用程序。

我想在表格中显示5个按钮。我做的第一种方法是在Table.js中对其进行硬编码

Table.js

        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          Reprocess
        </Button>{" "}
        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          View Details
        </Button>
        <Button hidden={!controlButton} onClick={() => updateConfirmation()}>
          Update
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => deleteConfirmation()}>
          Delete
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => resequenceConfirmation()}>
          Resequence
        </Button>

但是Table.js被设计为可重用，因此我受命将它们移到index.js。我通过创建一个具有包含按钮功能的var进行了尝试，并将其返回到Table.js，并使用此行{this.children}

使用child道具显示它。

index.js

const testButton = () => {
    return (
      <React.Fragment>
        <button>Test1</button>
        <button>Test2</button>
        <button>Test3</button>
        <button>Test4</button>
        <button>Test5</button>
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <MyTable
        {...{
          testButton
        }}
      />
    </React.Fragment>
  );
}

在我添加的Table.js中

table.js


export default function MyTable({
  testButton,
  ...props
}) {

  return (
    <React.Fragment>
      <Table {...getTableProps()}>
        *****{props.children}
      </Table>
    </React.Fragment>

当我使用 this.children =未定义 props.children =不显示任何内容

非常感谢您。

Answer 1

当您根据子集的长度呈现子代时，似乎没有将pageOptions道具传递给MyTable组件。

让孩子们做出反应

1 个答案: