Question

我在渲染此组件时遇到了麻烦（而且我也不知道它是否可以正确地从API获取数据，因为它无法渲染）：

class item_box extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: []
  }
}

function = () => {
  let request = new XMLHttpRequest()
  let output = []
  request.open('GET', 'http://localhost:3005/products/157963', true)
  request.onload = function() {
    let data = JSON.parse(this.response)
    this.setState(prevState => ({output: [...prevState.output, data]}))
    if (request.status >= 200 && request.status < 400) {
      console.log('ok');
    } else {
      console.log('error');
    }
  }
request.send()
}


render() {
  return (
    <ItemPanel>
<ItemBox>
  <BoxTitle>{this.state.output[0].brand}</BoxTitle>
  <BoxId>Id:774946</BoxId>
  <Details onClick={show_details}>Show more...</Details>
    <Inline>
      <Quantity type="number" defaultValue="1"></Quantity>
      <Icon>add_shopping_cart</Icon>
      </Inline>
      <AddItem>
    <Sfont>Add to cart</Sfont>
  </AddItem>
</ItemBox>
    <BoxImg src={require("./ucfnti1.jpg")} alt='img error'></BoxImg>
 </ItemPanel>
  );
}
}

与另一个组件一起

const item_details = (
<DetailsView id="details_view">
...
</DetailsView>
);

我正在尝试：

function Items() {
return (
  [item_details, item_box]
);
}

export default Items;

从我的index.js文件运行它：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Items from './DataHarvester'

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Items />, document.getElementById('root'));

也尝试过（带或不带括号）：

ReactDOM.render([<App />, <Items />],document.getElementById('root'));

对不起，但是我是个新手，如何渲染该组件？

Answer 1

您可以像其他任何元素一样构成组件，

ReactDOM.render(
  (<React.Fragment>
    <App /> 
    <item_details />
    <item_box />
  </React.Fragment>)
,document.getElementById('root'));

但是我相信这两个组件应该在App组件内部。

在React

1 个答案: