ReactJS рендеринг добавленного диапазона из строки

Question

У меня есть вопрос, похожий на этот вопрос

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

вход "A B C D"

выход A B C D (в этом вопросе нет случайного цвета, поэтому вместо него я использовал болт и акцент, та же логика)

В настоящее время у меня есть

//In component
function MakeColor(){
  var input = [
    {letter:"A",color:"Red"},
    {letter:"B",color:"Blue"},
    {letter:"C",color:"Orange"},
    {letter:"D",color:"Yellow"}
  ];
  var output ="";
  input.forEach(function(object){
    output=output+"<span className="+object.color+">"+object.letter+"</span>";
  })
  return React.createElement('div',null,output)
}
//In another component
class Display extends Component {
   componentDidMount(){
      this.setState({letter:MakeColor();})
   }
   render(){
      <div>{this.state.letter}</div>
   }
}
//In the outer component
...
render(){
  return(
     ...
     <Display />
     ...
  )
}
...

Это вернет текст <span className=Red>A</span><span className=Blue>B</span><span className=Orange>C</span><span className=Yellow>D</span> вместо ABCD

Answer 1

Ну, вы смешиваете много понятий.

1. Вам не нужно состояние

2. Используйте JSX вместо React.createElement , в этом случае он вам не нужен.

   функция Display () {return makeLetter ();
   }

Функция makeLetter :

const LETTERS = [
  { letter:"A",color:"Red" },
  { letter:"B",color:"Blue" },
  { letter:"C",color:"Orange" },
  { letter:"D",color:"Yellow" }
];

function makeLetter() {
  return LETTERS.map((obj) => <span className={obj.color}>{obj.letter}</span>);
}

Answer 2

Почему бы просто не использовать вместо этого JSX?

let input = [
  { letter: 'A', color: 'Red' },
  { letter: 'B', color: 'Blue' },
  { letter: 'C', color: 'Orange' },
  { letter: 'D', color: 'Yellow' }
];

let output = input.map(item => (
  <span className={item.color}>{item.letter}</span>
));

return (
  <div>{output}</div>
);

Или даже более кратко:

let input = [...];  // As before

return (
  <div>
    {input.map(item => (<span className={item.color}>{item.letter}</span>))}
  </div>
);

Answer 3

Вот мое наблюдение:

1) Вы не используете стили / классы CSS, также вы не использовали атрибут стилей.

Таким образом, ваш код должен выглядеть примерно так:

  var input = [
    {letter:"A",style: {color:"red"}},
    {letter:"B",style: {color:"blue"}},
    {letter:"C",style: {color:"orange"}},
    {letter:"D",style: {color:"yellow"}}
  ];

, а также в нижней строке вы можете использовать JSX для возврата вместо строки:

 output=output+"<span className="+object.color+">"+object.letter+"</span>";

Попробуйте эти пункты, пожалуйста