Question

我有以下JSON合约，该合约会传递给某些基本上迭代格式并在p元素内呈现数据的组件。但是，我希望能够设置自定义HTML元素，而不是使用默认的p元素。

实现这一目标有哪些好方法？

例如：

// from
const data = [{ text: 'hello' }, { text: 'world' }];
// to 
const data = [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }];

基本上迭代数组中的每个项目，并使用其自定义HTML元素来呈现文本。我知道可以通过使用React的非JSX语法来实现这一点，但是，这些组件非常复杂，所以我非常喜欢使用JSX。有什么想法吗？也许有一种方法可以将两者结合起来（对于自定义元素使用非JSX，在其中使用JSX？

Answer 1

在React.createElement()

等地图中使用React.createElement(item.element, null, item.text)函数映射

＆＃13;

class App extends React.Component {
  constructor(){
    super();
    this.state= {
      data : [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }]
    }
  }
  render() {
    
    return (
      <div>
        {this.state.data.map(function(item) {
          return (React.createElement(item.element, null, item.text)) 
        })}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 2

我能想到的一种方法是有一个开关声明，例如，如果你有很多，它可能有点太多了，但我现在想不出另一种方式让element直接返回span组件，我不确定后端组件是否可行。

_renderElementsFromJSON = (data) => {
    var elements = [];

    for(var i = 0; i < data.length; i++) {
        switch(data[i].element){
            case "span":
                elements.push(<span key={i}>{data[i].text}</span>);
                break;
            case "h1":
                elements.push(<h1 key={i}>{data[i].h1}</span>);
                break;
            //etc
        }
    }
    return elements;
}

Answer 3

如果创建名称以大写字母开头的变量，则可以使用JSX语法：

class App extends React.Component {
  constructor(){
    super();
    this.state= {
      data : [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }]
    }
  }
  render() {
    return (
      <div>
        {this.state.data.map((item) => {
          const Element = item.element; // Note that this "Element" variable must begin with capital letter.
          return <Element>{item.text}</Element>;
        })}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

这可能会有所帮助：ReactJS component names must begin with capital letters?

在React中插入动态HTML元素

3 个答案: