ReactJS服务器端呈现和componentDidMount方法

时间:2017-01-02 03:33:31

标签: javascript reactjs rendering react-router single-page-application

我是React的新手,所以请不要严格判断。 我在服务器上渲染我的React应用程序,并希望在前端执行代码。 应用程序使用样式正确呈现,没有警告或错误,但是由于我使用的API应该在正面执行,现在可以正常运行。

据我了解服务器渲染组件,因为服务器渲染和挂载组件在服务器上并且它没有调用import React from 'react'; import {render} from 'react-dom'; import SpComparison from './spComparison.jsx'; import Comparison from './comparison.jsx'; import AnalystRatings from './analystRatings.jsx'; export default class Insights extends React.Component { constructor(props){ super(props); this.state = { charts: [] } let _this = this; } componentDidMount() { console.log("I want to do log on front end side, but can't") } render () { let charts = this.state.charts.map(function(i){ if (i.type == 'comparison'){ return <Comparison key={ i.id } config={ i.config } /> } else if (i.type == 'sp-comparison'){ return <SpComparison key={ i.id } config={ i.config } /> } if (i.type == 'analyst-ratings'){ return <AnalystRatings key={ i.id } config={ i.config } /> } }); return ( <div id="insights" className="container"> <div className="row"> <div className="col-md-3 hidden-md-down" style={{ marginTop: 10 }}> <ul className='finstead-tabs'> <li className="finstead-tabs-header"> Categories </li> <li> <a href='' className="finstead-active-tab">Performance</a> </li> <li> <a href=''>Financial</a> </li> <li> <a href=''>Valuation</a> </li> <li> <a href=''>Shares</a> </li> <li> <a href=''>Outlook</a> </li> </ul> </div> <div className="col-xs-12 col-md-9"> { charts } </div> </div> </div> ) } } 方法 应该做我的API调用和其他工作人员

这是我的组件

ReactDOM.render

我想我的做法不对,所以请帮助我。

注意

在最高级别的组件中我没有调用 scrollViewMain.setOnTouchListener(new View.OnTouchListener() { float xCoor; float yCoor; float oldX; float oldY; View circle = findViewById(R.id.circle); long initialTime = 0; long endTime = 0; @Override public boolean onTouch(View v, MotionEvent event) { System.out.println("TOUCHED"); if (event.getAction() == MotionEvent.ACTION_DOWN) { if (initialTime == 0) { initialTime = System.currentTimeMillis(); } else { endTime = System.currentTimeMillis(); diff = endTime - initialTime; initialTime = endTime; xCoor = event.getX(); yCoor = event.getY(); } if ((diff > 3000)) { circle.setX(oldX); circle.setY(oldY); circle.setVisibility(VISIBLE); oldX = xCoor; oldY = yCoor; } else if (diff < 3000) { circle.setVisibility(View.INVISIBLE); circle.setX(oldX); circle.setY(oldY); oldX = xCoor; oldY = yCoor; } if ((xCoor > 1000) && (yCoor > 1800)){ v.scrollBy(0, 300); } } return false; } }); 可能会导致此行为吗?

我用过的

tutorial

1 个答案:

答案 0 :(得分:2)

我仔细阅读tutorial后找到了解决方案。

问题是我的疏忽,所有内容都在上面的教程中描述。

基本上在捆绑文件中,您应该再次调用ReactDOM.render来执行应用程序,但它不会影响性能,因为React使用VirtualDOM并与现有DOM进行区分。

所以没有ReactDOM.render js将不会被执行。

所以我创建了单独的文件app-script.js,这是我的包的入口点,它用ReactDOM.render调用我的最高组件。