(2)动态HTML标记:
基于整数输入渲染不同的HTML标记标记.为此,我最初尝试使用模板字符串,但不得不求助于条件渲染.

// No joy with Template strings
render (){
  <{`h${this.state.headerSize}`}>
    {this.state.headerText}
  
}




我喜欢使用JSX,能够使用动态元素名称来保持一致性会很不错.

我也知道:

assetType: ['DragNDrop','MultipleChoice','MatchPairs']


可以存储为:

assetType: [,, ]


哪个会奏效.

我对JSX元素数组的一个问题是如何将这些JSX元素存储在数据库中？我猜我必须存储它们,Strings但是当从数据库中拉回来时如何使用它们？

有人可以建议任何有关这些问题的工作和最佳实践方法吗？


1> Pineda..：
关于动态HTML标记:

编辑:
   正如文档建议的那样,如果首先首先分配大写变量,可以在运行时使用动态类型:

class Quiz extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            questionText: '',
            correctAnswer: [],
            assetType: ['DragNDrop', 'MultipleChoice', 'MatchPairs']
        }
    }
    render() {
        const ElementNameStartsWithCapitalLetter = this.state.assetType[0];
           // ^ -- capital letter here, ensure this works when used in JSX
        return ;
    }
}


这是因为用户定义的JSX组件必须大写.





以前的解决方案:

使用React.createElement:

class Quiz extends React.Component{
  constructor (props){
    super (props);
    this.state = {
      questionText: '',
      correctAnswer: [],
      assetType: ['DragNDrop','MultipleChoice','MatchPairs']
    }
  }
  render(){
    const { questionText, correctAnswer } = this.state;
    {React.createElement(
      [this.props.typeIndex],
      {...questionText, ...correctAnswer}
    );}
  }
}


使用条件渲染:


// Conditional rendering works, but yuck!
// One condition per state works
// but can be unnecessarily verbose
getHeader() {
  switch(this.state.headerSize){
    case 1:
      return 
{ this.state.headerText }; 

    case 2:
      return 
{ this.state.headerText }

    .
    .
    .
    default:
      return null;
  }
}

render (){
  return { this.getHeader() }; // bound correctly in constructor of course :)
}