Присоединитесь к массиву строк JS и элементу JSX

Я предполагаю, что вы пытаетесь зациклить, а затем визуализировать промежуток с маркером на итерацию.

Я также предполагаю, что вам нужен диапазон, чтобы он был встроенным элементом?

Я бы не использовал маркер-маркер, а скорее использовал бы что-то вроде:

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

в качестве альтернативы, если вы ДОЛЖНЫ использовать маркер, просто укажите фактический код для маркера, а не символ

• (Круговой список) код: & #8226; или & bull;

Попытайся

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

    return [...res, <span className = "bullet">•</span>, item];
})

Поскольку это для React, это можно сделать так.

В вашем компоненте:

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>
    );
}

В основном то, что здесь делается:

• Создайте массив (или получите его из другой функции).
• Переберите элементы массива.
• Создайте объект span для чисел и точки, кроме последнего.
• Все делается в рендере компонента.

Результат:

8•8•8•8

В 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>

Вот Песочница, чтобы увидеть, как он работает.

Вы также можете получить массив как свойства компонента и создать статический компонент, чтобы всегда отображать что-то подобное.

Удалить:

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

изменение

myArray.map

к

this.props.myArray.map

позвоните так:

<NumberDotComponent myArray = {"8.8.8.8".split('.')}/>

Проблема в том, что join пытается преобразовать объект (элемент React) в строку, поскольку соединение является строковой функцией. [object Object] является результатом метода toString для этого объекта. Вместо этого вы должны вернуть массив.

Вот пример, который выполняет итерацию по каждому символу строки и заменяет определенный символ элементом 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>