Question

我正在学习反应并玩弄它。我现有的项目是从后端使用java并计划在前端集成React。我有挑战，当页面第一次加载时，java将返回一个带有项目列表的jsp。我需要将这个项目列表传递给React构造函数以进行状态初始化。

如何将列表传递给React构造函数？

感谢!!!

以下是我的计划： -

import React from 'react';
import ReactDOM from 'react-dom';

class ItemList extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         itemList: this.props.items;
      };
   }

   render() {
      return (
         <div>
            <table id="item-table" className="table table-hover">
               <tbody>
                  {this.state.itemList.map((item, i) => <TableRow key = {i} item = {item} />)}
               </tbody>
            </table>
         </div>
      );
   }
};

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.item.name}</td>
            <td>{this.props.item.no}</td>
            <td>{this.props.item.amount}</td>
         </tr>
      );
   }
}

export default ItemList;

ReactDOM.render(<ItemList/>, document.getElementById('item-list'));

Answer 1

按照您现在的方式做事

将列表插入页面上的javascript文件中，并使其可访问

在componentDidMount内用类似的方式更新状态

componentDidMount() {
    this.setState({ myList: global.MYCOMPANY.myList });
}

您还可以将提取操作移至组件内部的某个位置。在这里您可以开始利用其他反应生态系统，例如redux / thunk或DIY。...

    componentDidMount() {
        fetch('/getList')
            .then((rs) => {
                this.setState({ myList: rs });
            })
    }

为了简洁起见，我使用了箭头功能。每次状态更改时，都会调用类中的render方法。您可以根据需要选择不返回任何内容，空白列表，甚至在此处返回加载图标。这仍然是解决方案的入门级别，也可以用于小型项目，但是在寻求向外扩展之前，这是一个不错的起点。

React - 如何将数据从html传递给React构造函数

1 个答案: