Rendering durch Komma getrennte Liste von links

Ich versuche, die Ausgabe einer Liste von durch Kommata getrennt links und dies ist meine Lösung.

var Item = React.createComponent({
  render: function() {

    var tags = [],
        tag;

    for (var i = 0, l = item.tags.length; i < l; i++) {
      if (i === item.tags.length - 1) {
        tag = <span><Tag key={i} tag={item.tags[i]} /></span>;
      } else {
        tag = <span><Tag key={i} tag={item.tags[i]} /><span>, </span></span>;
      }
      tags.push(tag);
    }

    return (
      <tr>
        <td>
          {item.name}
        </td>
        <td>
          {tags}
        </td>
      </tr>
    );

  }
});

Ich wurde gerade gefragt ob es eine schönere und saubere Art und Weise, dies zu erreichen?

Dank

InformationsquelleAutor Nick | 2014-05-12
  1. 57

    Auf dem Khan Academy nutzen wir einen Helfer mit Namen intersperse für diese:

    /* intersperse: Return an array with the separator interspersed between
 * each element of the input array.
 *
 * > _([1,2,3]).intersperse(0)
 * [1,0,2,0,3]
 */
function intersperse(arr, sep) {
    if (arr.length === 0) {
        return [];
    }

    return arr.slice(1).reduce(function(xs, x, i) {
        return xs.concat([sep, x]);
    }, [arr[0]]);
}

    das Ihnen erlaubt, code zu schreiben, wie:

    var tags = item.tags.map(function(tag, i) {
    return <Tag key={i} tag={item.tags[i]} />;
};
tags = intersperse(tags, ", ");
    • Keine Ahnung, wie Sie passieren konnten, ein element (wie ein <span/>) als zweiten parameter? Es funktioniert, aber ich bekomme eine Warnung über nicht die Angabe eines key... ich habe versucht, durch die Verpackung des <span> in einer Funktion (und generiert einen zufälligen Schlüssel), aber das scheint nicht ganz richtig oder zu arbeiten.
    • Ich habe erkannt, das ist der Weg, ich könnte es tun; übergeben Sie einer Funktion als Trennzeichen akzeptiert und idx und verwenden Sie dann den index des array Abschwächer als ein Schlüssel.
    • So etwas wie in das wesentliche
    InformationsquelleAutor Sophie Alpert
  2. 51

    Einfach

    {tags.map((tag, i) => <span key={i}>
    {i > 0 && ", "}
    <Tag tag={tag} />
</span>)}

    In Reagieren 16 es geht auch einfacher:

    {tags.map((tag, i) => [
    i > 0 && ", ",
    <Tag key={i} tag={tag} />
])}
    • Süß und Einfach!
    • Würden Sie mir erklären das ein bisschen? {!!i && ", "}
    • Diese Zeile druckt Komma vor jedem tag, außer den ersten. Ausdruck !!i nur konvertiert i zu boolean. Auch !!i kann ersetzt werden durch i > 0.
    • Ich danke Ihnen sehr.
    • Eine der besten Wert-pro-Zeichen-Antworten, die ich je gesehen habe. Sollte ich vorschlagen, die Migration dieses Code-Golf? =)
    • Dies wird fügen Sie ein Komma nach dem 1. element, wie gut? Der Grund, den ich verlange, für das 1. element, index o und !!0 zurück false. Ich denke auch, dies sollte eine zusätzliche Komma nach dem letzten element.
    • Bei jeder iteration es denkt "Sollte ich hinzufügen, Komma, bevor dieses Element?". Am 1. iteration es denkt "sollte ich das Komma am Anfang sehr?". Wenn wir zu löschen !!i && es macht <span>, 0</span><span>, 1</span> ....
    • Oh mein Fehler.. ich war Lesen dies als: {tags.map((tag, i) => <React.Fragment key={i}> <Tag tag={tag} /> {!!i && ", "} </React.Fragment>)}

    InformationsquelleAutor imos
  3. 7

    Oder schreiben Sie einfach die Liste Elemente, um eine ungeordnete Liste und CSS verwenden.

    var Item = React.createComponent({
  render: function() {

    var tags = this.props.item.tags.map(function(i, item) {
      return <li><Tag key={i} tag={item} /></li>
    });

    return (
      <tr>
        <td>
          {this.props.item.name}
        </td>
        <td>
          <ul className="list--tags">
            {tags}
          </ul>
        </td>
      </tr>
    );

  }
});

    Und CSS:

    .list--tags {
    padding-left: 0;
    text-transform: capitalize;
}

.list--tags > li {
    display: inline;
}

.list--tags > li:before {
    content:',\0000a0'; /* Non-breaking space */
}
.list--tags > li:first-child:before {
    content: normal;
}
    • Es ist wirklich nicht explizit, auf diese Weise
    • Ich mag diesen Ansatz. Ich habe gerade .csv Klasse und machen es funktioniert mit jedem element: .csv>*, nicht nur ui>li und es ist völlig verständlich
    • Ich mag diesen Ansatz, weil es semantische, und soweit ich das sagen kann, funktioniert besser für die Erreichbarkeit.
    InformationsquelleAutor i_like_robots
  4. 1
    import React from 'react';
import { compact } from 'lodash';

//Whatever you want to separate your items with commas, space, border...
const Separator = () =>  { ... }; 

//Helpful component to wrap items that should be separated
const WithSeparators = ({ children, ...props }) => {

  //_.compact will remove falsey values: useful when doing conditional rendering
  const array = compact(React.Children.toArray(children));

  return array.map((childrenItem, i) => (
    <React.Fragment key={`${i}`}>
      {i > 0 && <Separator {...props} />}
      {childrenItem}
    </React.Fragment>
  ));
};

const MyPage = () => (
  <WithSeparators/>
    <div>First</div>
    {second && (<div>Maybe second</div>)}
    {third && (<div>Maybe third</div>)}
    <div>Fourth</div>
  </WithSeparators>
);
    InformationsquelleAutor Sebastien Lorber
  5. 0

    Hier ist eine Lösung, die es ermöglicht <span>s und <br>s und junk als Trennzeichen:

    const createFragment = require('react-addons-create-fragment');

function joinElements(arr,sep=<br/>) {
    let frag = {};
    for(let i=0,add=false;;++i) {
        if(add) {
            frag[`sep-${i}`] = sep;
        }
        if(i >= arr.length) {
            break;
        }
        if(add = !!arr[i]) {
            frag[`el-${i}`] = arr[i];
        }
    }
    return createFragment(frag);
}

    Filtert es falsey array-Elemente zu. Ich habe diese für die Formatierung von Adressen, wobei einige-Adresse Felder sind nicht ausgefüllt.

    Er verwendet Fragmente zu vermeiden, die Warnungen über fehlende keys.

    InformationsquelleAutor mpen
  6. 0

    Die Lösung ohne zusätzliche tags

    reduce ist ein overkill hier und die optimale Funktion zu verwenden ist (technisch)
    flatMap (oder chain im Ramda). Leider ist JS nicht eine (noch) nicht.

    <p className="conceps inline list">
  {flatMap((concept, i) =>
    [concept, <span key={i} className="separator">&#8226;</span>]
  , lesson.concepts).slice(-1)}
</p>

    erzeugt so etwas wie

    Funktion • Funktion Typ • Higher-order-Funktion • Partielle Anwendung

    P. S.

    für Ramda es R.addIndex(R.chain) statt flatMap oben.

    InformationsquelleAutor Ivan Kleshnin
  7. 0

    Einfach:

    {items.map((item, index) => (
    <span key={item.id}>
      {item.id}
      {index < items.length - 1 && ', '}
    </span>
 ))}
    InformationsquelleAutor Abhijith
  8. 0

    Einfachste Weg, dies zu tun

        const elementsArr = ["a","b,"c"];
    let elementsToRender = [] ;
    elementsArr.forEach((element, index) => {
        let elementComponent = <TAG className="abc" key={element.id}>{element}</TAG>
        elementsToRender.push(elementComponent);
        if(index !== (elementsArr.length - 1)){
            elementsToRender.push(", ");
        }
    });

    render(){
        return (
            <div>{elementsToRender}</div>
        )
    }
    InformationsquelleAutor pareshm
Schreibe einen Kommentar