Question

有类似的问题

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

输入“ A B C 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 />
     ...
  )
}
...

这将返回文本 ABCD代替ABCD

Answer 1

为什么不只使用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 2

嗯，您正在混合很多概念。

您不需要状态
使用JSX代替 React.createElement ，在这种情况下您不需要它。

function Display（）{ 返回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 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>";

请尝试这些要点

ReactJS渲染附加跨度fromstring

3 个答案: