cómo renderizar componentes de reacción usando map y join

Tengo un componente que mostrará Array of String. El código se ve así.

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

Funciona perfectamente bien. es decir, si props.data = ['tom', 'jason', 'chris'] El resultado renderizado en la página sería tomjasonchris

Luego, quiero unir todos los nombres usando una coma, así que cambio el código a

this.props.data.map(t => <span>t</span>).join(', ')

Sin embargo, el resultado renderizado es [Objeto], [Objeto], [Objeto].

No sé cómo interpretar el objeto para que se convierta en componentes de reacción que se renderizarán. Cualquier sugerencia ?

Una solución simple es usar reduce()sin segundo argumento y sin difundir el resultado anterior:

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Sin segundo argumento, reduce()se iniciará en el índice 1 en lugar de 0, y reaccionar es perfectamente feliz con matrices anidadas.

Como se dijo en los comentarios, solo desea usar esto para matrices con al menos un elemento, porque reduce()sin un segundo argumento arrojará una matriz vacía. Normalmente, esto no debería ser un problema, ya que desea mostrar un mensaje personalizado que diga algo como 'esto está vacío' para las matrices vacías de todos modos.

Actualización para TypeScript

Puede usar esto en TypeScript (sin type-unsafe any) con un React.ReactNodeparámetro de tipo en .map():

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Puede utilizar reducepara combinar varios elementos de una matriz:

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <span>t</span>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, ',', elem]
        }, null)
     </div>
  }
})

Esto inicializa el acumulador con nulo, por lo que podemos envolver el primer elemento en una matriz. Para cada elemento siguiente en la matriz, construimos una nueva matriz que contiene todos los elementos anteriores usando ...-operator, agregamos el separador y luego el siguiente elemento.

Array.prototype.reduce ()

Actualización con React 16: ahora es posible renderizar cadenas directamente, por lo que puede simplificar su código eliminando todas las <span>etiquetas inútiles .

const list = ({ data }) => data.reduce((prev, curr) => [ prev, ', ', curr ]);

La respuesta aceptada en realidad devuelve una matriz de matrices porque prevserá una matriz cada vez. React es lo suficientemente inteligente como para hacer que esto funcione, pero es propenso a causar problemas en el futuro, como romper el algoritmo diferente de Reacts al dar claves para cada resultado del mapa.

La nueva React.Fragmentfunción nos permite hacer esto de una manera fácil de entender sin los problemas subyacentes.

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

Con React.Fragmentsimplemente podemos colocar el separador ,fuera del HTML devuelto y React no se quejará.

lo <span>{t}</span>que está devolviendo es un objeto, no una cadena. Consulte los documentos de reacción al respecto https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform

Al usar .join()en la matriz devuelta de map, se une a la matriz de objetos.[object Object], ...

Puede poner la coma dentro del <span></span>para que se represente de la manera que desee.

  render() {
    return (
      <div>
        { this.props.data.map(
            (t,i) => <span>{t}{ this.props.data.length - 1 === i ? '' : ','} </span>
          )
        }
      </div>
    )
  }

muestra: https://jsbin.com/xomopahalo/edit?html,js,output

Mi variante:

{this.props.data
    .map(item => <span>{item}</span>)
    .map((item, index) => [index > 0 && ', ', item ])}

Si solo quiero representar una matriz de componentes separados por comas, generalmente encuentro reducedemasiado detallado. Una solución más corta en tales casos es

{arr.map((item, index) => (
  <Fragment key={item.id}>
    {index > 0 && ', '}
    <Item {...item} />
  </Fragment>
))}

{index > 0 && ', '} representará una coma seguida de un espacio delante de todos los elementos de la matriz excepto el primero.

Si desea separar el penúltimo elemento y el último por otra cosa, diga la cadena ' and ', puede reemplazar {index > 0 && ', '}con

{index > 0 && index !== arr.length - 1 && ', '}
{index === arr.length - 1 && ' and '}

Usando es6 podrías hacer algo como:

const joinComponents = (accumulator, current) => [
  ...accumulator, 
  accumulator.length ? ', ' : '', 
  current
]

Y luego ejecuta:

listComponents
  .map(item => <span key={item.id}> {item.t} </span>)
  .reduce(joinComponents, [])

Utilice una matriz anidada para mantener "," fuera.

  <div>
      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? <span key={index}>{element}</span> : [<span key={index}>{element}</span>, ", "])}
  </div>

Optimícelo guardando los datos en una matriz y modifique el último elemento en lugar de verificar si es su último elemento todo el tiempo.

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>

Esto funcionó para mí:

    {data.map( ( item, i ) => {
                  return (
                      <span key={i}>{item.propery}</span>
                    )
                  } ).reduce( ( prev, curr ) => [ prev, ', ', curr ] )}

Como mencionó Pith , React 16 le permite usar cadenas directamente, por lo que ya no es necesario envolver las cadenas en etiquetas span. Sobre la base de la respuesta de Maarten , si también desea lidiar con un mensaje personalizado de inmediato (y evitar arrojar un error en una matriz vacía), puede dirigir la operación con una declaración if ternaria en la propiedad de longitud en la matriz. Eso podría verse así:

class List extends React.Component {
  const { data } = this.props;

  render() {
     <div>
        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     </div>
  }
}

Esto debería devolver una matriz plana. Maneje el caso con el primer objeto no iterable proporcionando una matriz vacía inicial y filtre la primera coma no necesaria del resultado

[{}, 'b', 'c'].reduce((prev, curr) => [...prev, ', ', curr], []).splice(1) // => [{}, 'b', 'c']

¿Soy el único que piensa que hay mucha propagación y anidamiento innecesarios en las respuestas aquí? Puntos por ser concisos, claro, pero deja la puerta abierta a problemas de escala o React cambiando la forma en que tratan con matrices / Fragmentos anidados.

const joinJsxArray = (arr, joinWith) => {
  if (!arr || arr.length < 2) { return arr; }

  const out = [arr[0]];
  for (let i = 1; i < arr.length; i += 1) {
    out.push(joinWith, arr[i]);
  }
  return out;
};

// render()
<div>
  {joinJsxArray(this.props.data.map(t => <span>t</span>), ', ')}
</div>

Una matriz, sin anidamiento. Tampoco hay un método atractivo de encadenamiento, pero si se encuentra haciendo esto con frecuencia, siempre puede agregarlo al prototipo de matriz o envolverlo en una función que también tome una devolución de llamada de mapeo para hacerlo todo de una vez.

function YourComponent(props) {

  const criteria = [];

  if (something) {
    criteria.push(<strong>{ something }</strong>);
  }

  // join the jsx elements with `, `
  const elements = criteria.reduce((accu, elem) => {
    return accu === null ? [elem] : [...accu, ', ', elem]
  }, null);

  // render in a jsx friendly way
  return elements.map((el, index) => <React.Fragment key={ index }>{ el }</React.Fragment> );

}