如何在React-Native可折叠/手风琴中使用外部源数据

时间:2017-05-16 22:58:22

标签: javascript reactjs react-native

我在我的项目中使用react-native collapsible / accordion。我在下面找到了一个例子

import React, {` Component } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';

const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...',
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...',
  }
];

class AccordionView extends Component {
  _renderHeader(section) {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.title}</Text>
      </View>
    );
  }

  _renderContent(section) {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  }

  render() {
    return (
      <Accordion
        sections={SECTIONS}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
      />
    );
  }
}

我已将数据存储在state

state = { orders: [] };

  componentWillMount() {
    axios.get('https://jsonblob.com/api/jsonBlob/c6ccf4e2-3871-11e7-ae4c-bb26ea80a2f8')
      .then(response => this.setState({ orders: response.data }));
  }

所以我的问题是如何在上面的示例代码中使用我的数据(orders)而不是SECTIONS。谢谢

1 个答案:

答案 0 :(得分:2)

在这里,你可以用this.state.orders

替换SECTIONS
    render() {
      return (
        <Accordion
          sections={this.state.orders}
          renderHeader={this._renderHeader}
          renderContent={this._renderContent}
        />
      );
    }