时间戳

首页 > 解决方案 > ReactJS 渲染附加范围 fromstring

javascript - ReactJS 渲染附加范围 fromstring

问题描述

我对这个问题有类似的问题

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

输入“ABC D”

输出A B C D （在这个问题中不可能出现颜色，所以我使用了 Bolt 和强调，同样的逻辑）

目前我有

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

标签： javascriptreactjsjsx

解决方案

为什么不直接使用 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>
);

推荐阅读