渲染一个包含组件的字符串

Question

我是 reactJs 的新手，我正在尝试构建一个应用程序，在搜索后我会得到一些结果。

我的问题是我有一个名为 ResultEntity 的组件，我正在尝试创建一个没有定义数量的 ResultEntity 组件的动态页面。

我试过这样的

  for(var i=0 ; i<result.length ; i++)
    {
      results += "<div> <ResultEntity/> </div>";
    };
    console.log(results);
    this.setState({result: results});

我试着把它归还，

  return (
    <div>
      <div  dangerouslySetInnerHTML={{ __html: this.state.result }}  />
    </div>
   );

和

return (
    <div>
      <div  dangerouslySetInnerHTML={{ __html: this.state.result }}  />
    </div>
   );

但两者都不起作用。任何想法将不胜感激。提前谢谢你

Answer 1

因此，您希望动态呈现组件列表。以下是使用.map 函数的方法：

// This also can be a functional component, instead of a class
class ResultEntity extends React.Component {
  render() {
    const { item } = this.props

    return <div>{ `${item.id} - ${item.name}` }</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      items: [
        { id: 1, name: 'Bulgaria' },
        { id: 2, name: 'Germany' },
      ]
    }
  }

  renderItems() {
    const { items } = this.state
 
    // Great explanations, why this work and it's rendered correctly:
    // https://medium.com/byte-sized-react/component-arrays-in-react-a46e775fae7b
    return items.map(item => <ResultEntity key={item.id} item={item} />) 
  }
  
  render() {
    // From React >= 16 it's possible to skip the wrapper `div`:
    // https://stackoverflow.com/a/32157488/4312466
    return <div>{ this.renderItems() }</div>
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>