我是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;
}
});
可能会导致此行为吗?
答案 0 :(得分:2)
我仔细阅读tutorial后找到了解决方案。
问题是我的疏忽,所有内容都在上面的教程中描述。
基本上在捆绑文件中,您应该再次调用ReactDOM.render
来执行应用程序,但它不会影响性能,因为React使用VirtualDOM并与现有DOM进行区分。
所以没有ReactDOM.render
js将不会被执行。
所以我创建了单独的文件app-script.js
,这是我的包的入口点,它用ReactDOM.render
调用我的最高组件。