我在组件跟随其路由后未呈现组件时遇到了一些问题。路线在父组件Drawings
中创建,并向Drawing
组件发送一些道具。React组件未使用React路由器进行呈现
当我点击链接时,我得到正确的路径,例如,/drawing/20170724
,我在render
函数中运行的日志语句。我也获得了道具,迄今为止非常好。但是,返回不会发生,所以我需要的HTML不可用。
这里是Drawings
,其中路线和链接的创建:
import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import AnimatedWrapper from "../modules/AnimatedWrapper";
import Drawing from '../components/Drawing';
class DrawingsComponent extends Component {
render() {
const drawings = this.props.drawings;
const drawingsMap = this.props.drawingsMap;
return(
<div>
<div className="page">
<div className="drawings-list">
{
drawings.map((drawing) => {
return(
<Link to={`/drawing/${drawing.date}`} key={drawing.date}>
<div className="drawing-thumb">
<h2>{drawing.date}</h2>
</div>
</Link>
)
})
}
</div>
{
Object.keys(drawingsMap).map((d, i) => {
return <Route path={`/drawing/${drawings[i].date}`} render={(props) => (<Drawing drawingPkg={drawingsMap[d]} drawingInfo={drawings[i]} {...props} />)} key={`${drawings[i].date}`}/>
})}
</div>
</div>
)
}
}
const Drawings = AnimatedWrapper(DrawingsComponent);
export default Drawings;
这里是Drawing
:
import React, { Component } from 'react';
import AnimatedWrapper from "../modules/AnimatedWrapper";
class DrawingComponent extends Component {
render() {
const drawing = this.props.drawingPkg;
const drawingInfo = this.props.drawingInfo;
console.log('gonna draw now');
return(
<div className="drawing">
<h2 className="drawing-title">{drawingInfo.title}</h2>
<canvas></canvas>
</div>
)
}
}
const Drawing = AnimatedWrapper(DrawingComponent);
export default Drawing;
我想不通为什么绘图组件没有返回。
控制台错误将帮助他人更快地了解您的情况?请帮忙提供。 – thelonglqd
我很抱歉,没有控制台错误 - 一切似乎运行良好。我在控制台中点击链接和'DrawingComponent'日志'现在绘制'的日志语句,但是返回语句永远不会运行,因为应该返回的HTML不存在于DOM中。 – alightedlamp