Question

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

我的问题是我有一个名为df = pd.read_csv('data.csv', header=None, sep=',', names=['Result', 'IP', 'Time']) new_df = df.apply(lambda x: x.str.split('[A-Za-z]{2,}:').str[1].str.strip('\"')) >>> new_df Result IP Time 0 Success 0.0.0.0 2018-08-20T12:00:00.000Z 1 Failure 1.1.1.1 2018-08-20T12:01:00.000Z的组件，而我正在尝试创建一个动态页面，而没有定义数量的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>
   );

但是两个都没用。任何想法将不胜感激。预先谢谢

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>

渲染包含组件的字符串

1 个答案: