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);

我遇到了错误：

consts未定义

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

Answer 1

这个consts变量是什么，我该如何定义它？

在源代码中为this file，您可以这样导入它：

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

或者导入轮播和const：

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

这种代码风格是什么，为什么我们需要传递一个函数而不只是一个组件来渲染Arrow？

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

使用一个功能，然后将调用该功能并将道具交给您。然后，您决定如何处理它们，然后返回执行所需操作的组件。如果您只想将这些道具放在组件上，则可以：

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

但是您也可以做更复杂的事情

Answer 2

1。有一个consts.js file，其中定义了consts.PREV和consts.NEXT。

2。如果您只是传递了一个组件，那么箭头方向的逻辑在哪里？

未定义React Carousel renderArrow consts

2 个答案: