Соединение JS String Array и JSX element

Question

Я пытаюсь присоединиться к "8.8.8.8".split('.') массиву JS элементов с элементом JSX <span className="bullet">•</span>.

Визуализация этого в среде React дает 8[object Object]8[object Object]8[object Object]8.

Есть какое-нибудь решение для этого?

Answer 1

Проблема в том, что join пытается преобразовать объект (элемент React) в строку, поскольку join - это строковая функция. [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>

Answer 2

Попробуйте

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

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

Answer 3

Поскольку это для 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('.')}/>

Answer 4

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

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

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

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

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

• (круговая точка маркировки) код: & #8226; или & bull;