javascript - ReactJS 渲染附加跨度 fromstring

Question

我和this question有类似的问题

我正在尝试转换创建一个自定义组件，它将每个字符串转换为不同的颜色例如

输入“A B C D”

输出 A B C D(不能在这个问题上碰碰运气，所以我用 Bolt 和 emphasis 代替，同样的逻辑)

目前我有

//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，在这种情况下您不需要它。

   函数显示(){ 返回 makeLetter();
   

ma​​keLetter 函数:

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