Estoy intentando unir "8.8.8.8".split('.') JS Array de elementos con el elemento JSX <span className="bullet">•</span>.

Representar esto en el entorno React da 8[object Object]8[object Object]8[object Object]8.

¿Alguna solución a esto?

2
Rakesh Peela 8 sep. 2018 a las 19:38

4 respuestas

La mejor respuesta

Intentalo

"8.8.8.8".split('.').reduce((res, item) => {
    if (!res) {
        return [item];
    }

    return [...res, <span className="bullet">•</span>, item];
})
1
Philip Pavo 8 sep. 2018 a las 16:57

Supongo que está tratando de hacer un bucle y luego representar un lapso con una viñeta por iteración.

¿También voy a suponer que quieres un lapso por lo que es un elemento en línea?

No usaría la viñeta de personaje, sino que usaría algo como:

<ul>
    // loop through your array here
    <li className="bullet" style="display:inline;"> 
         arrayElement 
    </li>
</ul>

Alternativamente, si DEBE usar una viñeta, simplemente especifique el código real de la viñeta en lugar del símbolo

• Código (punto circular): & #8226; o & bull;

0
Denis S Dujota 8 sep. 2018 a las 16:54

Como esto es para React, se puede hacer así.

En su componente:

render(){
    let myArray = "8.8.8.8".split('.');

    return (
    <div>
      {myArray.map((item, index) => {
        if (index !== myArray.length -1 ) {
            return <span key={index}>{item}<span className="bullet">•</span></span>
           } else {
            return <span key={index}>{item}</span>
           }
         })}
    </div>
    );
}

Básicamente lo que se está haciendo aquí es:

  • Cree la matriz (u obténgala de otra función).
  • Pase sobre los elementos de la matriz.
  • Cree un objeto span para los números y el punto, excepto el último.
  • Todo se hace en el render del componente.

El resultado es:

8•8•8•8

En html:

<div>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8</span>
</div>

Aquí hay un Sandbox para que funcione.

También podría recibir la matriz como accesorios del componente y crear un componente estático para representar siempre algo similar.

Eliminar:

let myArray = "8.8.8.8".split('.');

Cambio

myArray.map

Para

this.props.myArray.map

Llama así:

<NumberDotComponent myArray={"8.8.8.8".split('.')}/>
0
c-chavez 8 sep. 2018 a las 17:16

El problema es que join intenta convertir el objeto (elemento React) en una cadena, ya que join es una función de cadena. [object Object] es el resultado del método toString en ese objeto. En su lugar, debe devolver una matriz.

Aquí hay un ejemplo que itera sobre cada carácter de la cadena y reemplaza un carácter específico con un elemento React:

function App(props) {
  let foo = '8.8.8.8'
  let replaceChar = '.'
  let output = [...foo].map(char=>(
    char === replaceChar ? <span className="bullet">•</span> : char
  ))
  
  return <React.Fragment>{output}</React.Fragment>
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>

<div id="app">Error Encountered</div>
0
vol7ron 8 sep. 2018 a las 17:38