React Carousel renderArrow consts 未定义

Question

我正在使用react-elastic-carousel，我正在尝试渲染我自己的自定义箭头。
这是我的代码（取自文档中的示例）

function App() {
  return (
    <div>
      <Carousel
        renderArrow={({ type, onClick }) => {
          const pointer = type === consts.PREV ? '' : ''
          return <button onClick={onClick}>{pointer}</button>
        }}
      >
        <Item>1</Item>
        <Item>2</Item>
        <Item>3</Item>
        <Item>4</Item>
        <Item>5</Item>
        <Item>6</Item>
      </Carousel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我收到错误：

常量未定义

我这里有两个问题：
1. 这个 consts 变量是什么以及如何定义它？
2. 这种代码风格是什么，为什么我们需要传递一个函数而不仅仅是一个组件renderArrow？

Answer 1

这个 consts 变量是什么以及如何定义它？

在源代码中是这个文件，你可以像这样导入它：

import { consts } from 'react-elastic-carousel';

或者导入轮播和常量：

import Carousel, { consts } from 'react-elastic-carousel';

这种代码风格是什么？为什么我们需要向 renderArrow 传递一个函数而不仅仅是一个组件？

它被称为“渲染道具”，它比仅仅传递对组件的引用更灵活。如果您传入的只是一个组件，那么他们将不得不猜测您希望他们用 和 做什么type，onClick因此他们能做的最好的事情就是将它们作为 props 传递给您的组件。

使用函数，然后将调用该函数并向您提供道具。然后，您决定如何处理它们，然后返回执行您想要的操作的组件。如果您只想将这些 props 放到组件上，您可以：

renderArrow={props => <button {...props}/>}

但你也可以做更复杂的事情