草庐IT

javascript - 集成和渲染 react-swipe-cards

coder 2024-05-10 原文

我对 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 ，这看起来有很多组件，但我不知道如何集成到这个例子中。

注意:在 repo 图中，我注意到还有另一个 developer进行了一些调整以使其与 React 16.xx.beta 兼容，我也尝试过，也不走运。

我几乎可以肯定，我在这里遗漏了一些概念，因此，我们也非常欢迎任何引用。

最佳答案

你要找的是功能性无状态组件，如下代码

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

Functional and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.

渲染函数组件的方式就像渲染普通的 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 功能组件，它为您提供 Cards 和 Card 等组件 用于在 Wrapper Component

中呈现卡片 View

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

export default class MyCards extends Component {

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

但是因为你没有状态而且你没有使用生命周期函数你可以简单地将上面的 MyCards 组件写成 

export const MyCards= () => {
    return <Wrapper />;
}

然而，我假设您最终会在那里编写一些逻辑，因此将其保留为有状态的 React 组件。我还包含了您可以处理左侧状态更改或写入滑动的逻辑。

Check a working DEMO

附言我建议彻底阅读 React 文档，因为它们已经很好地解释了这些概念

关于javascript - 集成和渲染 react-swipe-cards，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48053751/

react-swipe-cardsjavascriptcode39swipereactjs

有关javascript - 集成和渲染 react-swipe-cards的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2

    我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel

  4. ruby-on-rails - 我如何将 Hoptoad 与 DelayedJob 和 DaemonSpawn 集成？ - 2

    我一直很高兴地使用DelayedJob习惯用法:foo.send_later(:bar)这会调用DelayedJob进程中对象foo的方法bar。我一直在使用DaemonSpawn在我的服务器上启动DelayedJob进程。但是...如果foo抛出异常，Hoptoad不会捕获它。这是任何这些包中的错误...还是我需要更改某些配置...或者我是否需要在DS或DJ中插入一些异常处理来调用Hoptoad通知程序？回应下面的第一条评论。classDelayedJobWorker 最佳答案 尝试monkeypatchingDelayed::W

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  6. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  9. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐