Question

我正在尝试学习反应，并在小范围内遇到问题。这就是我的App.js：

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component{
  render(){
    return <h1>Heyy</h1>;
  }
  render(){
    return <h1>Helo</h1>
  }
}

export default App;

它仅呈现Helo。如果我有多个组件，可以说NavBar和ImageComp，在将其传递到ReactDOM.render之前如何在单页上呈现？

据我了解，每个组件在进入App之前先进入index.js，但是我将如何在App中包含多个组件？

Answer 1

Component必须返回JSX或不返回null。您需要从基于类的组件呈现的所有内容都应放在render方法内：

class App extends Component{
    render(){
         return(
           <>
               <h1>Title</h1>
               <h2> Subtitle </h2>
               <MyCustomComponent />
           </>
        )
    }
}

符号<> </>只是<React.Fragment />的快捷方式，以避免返回相邻的JSX块

Answer 2

React还允许您返回元素数组。

Select LTRIM(RTRIM(TT.Item_Number)) Sku, LTRIM(RTRIM(TT.Color_Code)), 
TT.Retail Retail
From 
(
Select Distinct 
Item_Number
,Color_Code
From Order_Detail O
Where O.Customer_Number = 'Ecom2x' AND ISNUMERIC(O.Customer_Purchse_Order_Number) <> 0 

EXCEPT

Select 
Z.Sku
,Z.Color
From Z_N_FullRetailTable Z
) T --Gets List of Missing SKUs

LEFT JOIN
(
Select Distinct 
Item_Number
,Color_Code
,MAX(O.Price) OVER (Partition by O.Item_Number) Retail
From Order_Detail O
Where O.Customer_Number = 'Ecom2x' AND ISNUMERIC(O.Customer_Purchse_Order_Number) <> 0 
) TT ON T.Item_Number = TT.Item_Number and T.Color_Code = TT.Color_Code

如何在反应中渲染多个组件？

2 个答案: