Question

我和reactJs非常相似，事实上我刚刚完成了this course并且在这里遇到了一些概念。

我愿意为人们创建一个应用程序，用于表达他们对主题通讯的偏好，并且已经抓住了一个非常全面的主题列表（2k +）并想要一些有趣的方式来选择它们，所以我认为Tinder可刷卡的东西是完美的选择，所以我试图在我的应用程序中实现this react module功能。

但它没有出现任何东西。

我只是created a Repo，其中我尝试了几次没有运气。

基本上，模块文档中提供的示例说它应该以

开头

const data = ['Alexandre', 'Thomas', 'Lucien', 'Raphael', 'Donatello', 'Michelangelo', 'Leonardo']


const Wrapper = () => {
  return (
      <Cards onEnd={console.log("action('end')")} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={console.log("action('swipe left')")} 
            onSwipeRight={console.log("action('swipe right')")}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

但是我完全迷失了它，我认为它应该为我提供一个React组件<Something />，而是它在一个函数的行中产生一些东西，返回一个div，组件看起来很多，但我不知道如何集成到这个例子中。

注意：在回购图中，我注意到还有另一个developer进行了一些调整以使其与16.xx.beta兼容，我也尝试了它，也没有幸运。

我几乎可以肯定，我在这里缺少一些概念，因此，任何参考资料都非常受欢迎。

Answer 1

您正在寻找的是功能无状态组件，下面的代码

const Wrapper = () => {
  return (
    <Cards onEnd={console.log("action('end')")} className='master-root'>
      {data.map(item =>
        <Card
          key={item}
          onSwipeLeft={() => {console.log("action('swipe left')")}}
          onSwipeRight={() => {console.log("action('swipe right')")}}>
          <h2>{item}</h2>
        </Card>
      )}
    </Cards>
  )
}

是一个功能组件。

根据 documentation

功能和类组件

定义组件的最简单方法是编写JavaScript   功能：
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
此函数是一个有效的React组件，因为它接受一个 “props”（代表属性）对象参数与数据和返回一个React元素。我们将这些组件称为“功能”，因为它们实际上是JavaScript函数。

渲染函数组件的方式就像渲染普通的React组件

一样

<Wrapper {...props} />  // {...props} is a spread operator syntax to just pass all the props down to wrapper you can pass selected props too

同样react-swipe-card没有为您提供Wrapper functional component，它为您提供Cards和Card等组件，用于在{{1}中呈现卡片视图}

从'react-swipe-card'导入卡片，{卡片} 现在在你的情况下，它看起来像

Wrapper Component

但是，由于您没有状态，并且您没有使用生命周期功能，您可以简单地将上述MyCards组件编写为

export default class MyCards extends Component {

  render() {
    return <Wrapper />;
  }
}

然而，我假设你最终会在那里编写一些逻辑，从而使它成为一个有状态的React组件。我还提供了逻辑，您可以在左边处理状态更改或写入滑动。

Check a working DEMO

P.S。我建议彻底浏览React文档，因为他们已经很好地解释了这些概念

Answer 2

如果我理解你的问题就是假设。看起来你有一些小错误。我下载了repo并在React 15.4.2上运行测试

您的卡组件电话：

 <Card 
        onSwipeLeft={console.log("action('swipe left')")} 
        onSwipeRight={console.log("action('swipe right')")}>
        <h2>{item}</h2>
      </Card>

我的卡组件电话：

     <Card 
        key={item}
        onSwipeLeft={()=>{console.log("action('swipe left')")}} 
        onSwipeRight={() => {console.log("action('swipe right')")}}>
        <h2>{item}</h2>
      </Card>

我们需要为事件处理程序创建范围，这就是解决方案之一是箭头函数的原因。然而，它们不仅仅是围绕匿名函数的语法糖。箭头函数没有自己的上下文，而是使用与定义它的上下文相同的this。以下是更详细的handle-events-in-react-with-arrow-functions

同样在MyCards上，您将返回类似（您的代码）

的内容

export default class MyCards extends Component {

constructor(props) {
super(props);

this.state = {

    }
}
render() {
    return Wrapper;
    // return (
    //     <div>
    //         <p>Something</p>
    //         {Wrapper();}
    //     </div>
    // );
}

}

但你应该返回一个组件，返回的方式必须是

导出默认类MyCards扩展了Component {

constructor(props) {
super(props);

this.state = {        
    }
}
render() {
    return <Wrapper/>      
}

}

建议：如果你的MyCards组件中没有任何状态，你可以使它成为一个功能组件

Answer 3

目前的最佳答案是关于功能组件的概念是正确和伟大的。您实际上是在创建一个高阶组件。

但是我觉得你的回购实际上可以通过做这个改变来解决：

render() {
        return Wrapper();
    }

看到我实际执行了Wrapper函数以获取Component作为结果，否则你正在渲染一个函数而不是一个Component。

你可以重构你的代码以实际扩展React.Component，我实际上推荐这个，因为HOC更适合用于其他类型的目标，比如装饰器。

看到这里，我唯一改变的是：https://codesandbox.io/s/xp6pzpyoq

集成和渲染反应刷卡

3 个答案: