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

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 方法。如果需要，您可以选择不返回任何内容、空列表甚至加载图标。这仍然是解决方案的入门级，或者适用于小型项目，但在寻求向外扩展之前是一个很好的起点。