Question

我正在研究Reactjs。在我的网站项目中，我有两个带有react元素代码的.js文件，我需要将一个.js文件中的元素集成到index.html页面中，并将第二个.js文件中的元素集成到第二个.html页面中。但是这两个元素只能显示在index.html页面上。我使用上载的文件package.json和node_modules通过命令“ npm start”在本地主机上运行该项目。如何在网站第二页上的第二个文件中显示我的react元素？

文件“ index.html”

select s.salary_id , e.employee_id, e.given_names, d.amount as 'deduction_amount',
dty.`type` as 'deduction_type', dty.epf_enable as 'deductType_epf_enable', dty.pre_tax, dty.pay_run_editable as 'deductType_pay_run_editable',
a.amount as 'allowance_amount', aty.`type`as 'allowanceType_type', aty.epf_enable as 'allowanceType_epf_enable',
aty.payee_enable  as 'allowanceType_payee', aty.pay_run_editable as 'allowanceType_pay_run_editable'
from employees as e inner join salary as s on e.employee_id = s.salary_id
inner join deductions as d on  s.salary_id = d.salary_id
inner join deduction_types as dty on d.deduction_type_id = dty.deduction_type_id
inner join allowances as a on  s.salary_id = a.salary_id
inner join allowance_types as aty on a.allowance_type_id = aty.allowance_type_id

文件“ element1.js”

<h1>My react element №1</h1>
<div id="app1">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element1.js">   
</script>

文件“ page2.html”

class Element1 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element1/>,        
    document.getElementById("app1")
);

文件“ element2.js”

<h1>My react element №2</h1>
<div id="app2">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element2.js">   
</script>

文件“ package.json”

class Element2 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element2/>,        
    document.getElementById("app2")
);

在网站的不同页面上显示反应元素

0 个答案: