React: Uncaught TypeError: X is not a function

Question

我正在尝试在 react-table 列中呈现一个按钮。如果我将按钮重构为它自己的组件，它会抱怨 it's not a function.

顶级（ExampleReactTable.js）：

const handleClick = () => setIsOpen(true);

const columns = getTableColumns(handleClick);

中间层(getTableColumns.js):

Cell: () => <ExampleButton handleClick={() => handleClick()} />

底层(ExampleButton.js):

const ExampleButton = handleClick => {
  console.log(handleClick);
  return (
    <Box>
      <Button variation="text" onClick={() => handleClick()}>
        Click
      </Button>
    </Box>
  );
};

此错误与 handleClick is not a function。

如果我不重构按钮，它会起作用：

Cell: () => (
        <Box>
          <Button variation="text" onClick={() => handleClick()}>
            Click
          </Button>
        </Box>)

Answer 1

你没有解构 props，因为函数将 props 作为对象接收，你将其作为函数传递给 onclick，导致错误，试试这个：

const ExampleButton = ({handleClick}) => {
  console.log(handleClick);
  return (
    <Box>
      <Button variation="text" onClick={() => handleClick()}>
        Click
      </Button>
    </Box>
  );
};

这等同于：

const ExampleButton = (props) => {
  console.log(handleClick);
  return (
    <Box>
      <Button variation="text" onClick={() => props.handleClick()}>
        Click
      </Button>
    </Box>
  );
};

React: Uncaught TypeError: X is not a function

React: Uncaught TypeError: X is not a function

javascript

reactjs

react-table