Question

我是React和JavaScript的新手。我尝试在react模板中使用以下数据。它们是对象数组，因此我希望此对象数组中的每个项目都以HTML（反应模板）单独打印。任何人都可以帮助我，我在下面提供了代码，请帮助：

const fakeData = [
  {
    MOP: 'MOP',
    code: '#1180-xxxx',
    date: '10-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP1',
    code: '#1180-xxxx1',
    date: '11-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP2',
    code: '#1180-xxxx2',
    date: '12-08-2018',
    status: 'Pending Order',
  },
];

export class TransactionPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { fakeData };
  }

  render() {
    const { classes, intl } = this.props;
    return (
      <Page>
        <Helmet>
          <title>{intl.formatMessage({ ...messages.header })}</title>
          <meta
            name="description"
            content={<FormattedMessage {...messages.meta} />}
          />
        </Helmet>
        <PageContent>
          <Paper>
            <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>
                  // show the item here
                </List>
              </Grid>

              <Hidden xsDown>
                <Grid item sm={7} md={8} lg={9}>
                  <Grid
                    container
                    direction="column"
                    spacing={16}
                    className={classes.details}
                  >
                    <Grid item xs={12} className={classes.center} />
                    <Grid item xs={12}>
                      <Typography variant="h6">CREDIT DEBIT</Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Divider />
                    </Grid>
                    <Grid item xs={12} />
                  </Grid>
                </Grid>
              </Hidden>
            </Grid>
          </Paper>
        </PageContent>
      </Page>
    );
  }
}

TransactionPage.propTypes = {
  intl: PropTypes.object.isRequired,
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
  TransactionPage: makeSelectTransactionPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'TransactionPage', reducer });
const withSaga = injectSaga({ key: 'TransactionPage', saga });

export default compose(
  withStyles(styles),
  injectIntl,
  withReducer,
  withSaga,
  withConnect,
)(TransactionPage);

我希望此代码转换为以下页面中的输出：

             <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>

                  <ListItem button>
                    <span>MOP</span>
                    <span>#1180-xxxx</span>
                    <span>10-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP1</span>
                    <span>#1180-xxxx1</span>
                    <span>11-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP2</span>
                    <span>#1180-xxxx2</span>
                    <span>12-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                </List>
              </Grid>

我正在使用反应，如何在反应模板中循环它们。

Answer 1

您只需使用JSX创建地图：

class A:
    def __init__(self, some_list):
        self.this_list = some_list
        self.create_another_list()

    def create_another_list(self):
        self.another_list = self.this_list[::-1]

    def print_another_list(self):
        return self.another_list

A([1,2,3]).print_another_list()

Answer 2

您可以像伪一样映射它...

var formatted = fakeData.map((item, idx) => {
return(
 <ListItem key={idx}>
   <span>{item.MOP}</span>
   <span>{item.code}</span>
   <span>{item.date}</span>
   <span>{item.status}</span>
</ListItem>
)
})
 return(
 <List>
 {formatted}
 </List>
)

在react模板中提取对象数组中的对象项

2 个答案: