时间戳

首页 > 解决方案 > 一些 ReactNative 东西的困惑

javascript - 一些 ReactNative 东西的困惑

问题描述

下面是 React Native 环境的代码。我可以看到创建了一个主组件应用程序。它里面有状态。但是，混淆使用状态的实际目的是什么。

 import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App

了解主App组件中的Header和TableRow组件。但是，与以下行混淆：

{this.state.data.map((person, i) => <TableRow key = {i} 
                 data = {person} />)}

任何人都可以解释上述语法的工作原理吗？谢谢。

标签： javascriptreact-nativereact-native-androidjsxreact-native-ios

解决方案

  • 你想知道为什么 React Native 使用状态。你应该看看这个Facebook拥有的文档https://facebook.github.io/react-native/docs/state并做例子，然后它会帮助你清楚你的想法。

  • 回答您的示例代码：

    {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}

    • 首先它从变量状态中获取数据map并循环通过它来渲染每一行视图。如果您执行一些触发器来更改数据，例如this.setState({data: []})，它会将视图更改为空并自动刷新视图，它会回答为什么使用状态。=))

这很简单！

推荐阅读