Question

当我尝试进入React时，我发现我正在查看我在jQuery中可以非常简单地完成的事情列表但是在React中绝对是一场噩梦。

https://codepen.io/PocketNinjaDesign/pen/boJoEd

已将目标从2个元素修改为第n个

目标是页面上的第n个元素可以在页面上我想要的任何元素/组件内弹出。我通过向appendTo添加一个包含Json和一系列组件的数据属性来实现这种旧方式。

您还可以使用JS将组件转换为忍者，并通过包含要显示的组件列表来传递对象。

$(function() {
  $('.other-ninja').Ninja({
    components: ['title', 'header', 'angry']
  });
});

所以，想象一下React Components现在是所有不同类型的组件，但是忍者块可以被告知它们可以出现在他们想要的任何组件中。

如果没有经过声明和消化不良的球疼，React怎么可能呢？

这是我的jQuery popup appendTo脚本的代码，就像我想在React中实现的那样。

自从我收到的答案以来，我已经改变了代码，因为我不认为我正确地提出了我的问题。

HTML

<div class="ninja" data-ninja='{"components": ["title", "happy", "sad", "stinky", "header", "AnotherComponent"]}'></div>
<div class="mongoose" data-ninja='{"components": ["happy", "sad", "stinky", "angry", "footer"]}'></div>
<div class="other-ninja"></div>

<h1 class="title">Getting React to work like simple jQuery :-D</h1>
<p>Where ALL HTML elements on this page represent React Components.  All components being
split into different files and imported using babel es6 compiler</p>
<div class="header">
  <div class="angry"></div>
</div>
<div class="content">
  <ul>
    <li>Just a list showing more component depth</li>
    <li>
      <div class="someOtherComponent">
        <div class="sad"></div>
      </div>
    </li>
    <li>Trying to show the code works regardless of where the elements are</li>
  </ul>
  <div class="AnotherComponent">
    <div class="SomeOtherComponent">
      <div class="WhatAnotherComponent"><div class="happy"></div></div>
    </div>
  </div>
</div>
<div class="footer">
  <div class="whatever">
    <div class="stinky"></div>
  </div>
</div>

SCSS

删除了SCSS，因为它减损了标记和javascript的主要焦点

脚本

$(function() {
  function Ninja(e, options) {
    var $this = $(e);
    options = $.extend({}, $this.data('ninja'), options);
    var componentList = options.components;

    setInterval(function() {
      var randomNum = Math.floor(Math.random() * componentList.length);
      $this.appendTo('.' + componentList[randomNum]);
    }, 1000);
  }

  $.fn.Ninja = function(options) {
    $(this).each(function(i, e) {
      Ninja(e, options);
    });
  };

  $('[data-ninja]').each(function(i, e) {
    $(e).Ninja();
  });
});

$(function() {
  $('.other-ninja').Ninja({
    components: ['title', 'header', 'angry']
  });
});

Answer 1

当你习惯使用jQuery但实际上使用React时，React可能看起来像＆＃34;噩梦＆＃34; 非常简单。您只需调整编码逻辑以适应React指南。

您共享的代码可以通过多种不同方式实现。我做了一个小的working version供你比较。初看起来，实现相同的简单影响可能看起来要多得多，但React对DOM（Virtual DOM）有更多的控制权，并且可以通过更多不同的方式进行操作。此示例中的大多数代码对于所有组件都是相同的。您只需要考虑match()方法。只需简单的render语句即可实现追加或删除组件/元素。组件逻辑还为您提供了极大的灵活性和可重用性。网上有很多很好的例子和教程可以告诉你如何以反应方式解决问题。一个非常好的起点是React Docs和awesome-react。

if

如何像JQuery一样简单地使用React组件

1 个答案: