结构是下面这样的，但是没有效果

import 。。。。。

class TradingCenter extends Component {

constructor() {
super();
}

componentDidMount() {
{localStorage.getItem('cookie_state') === '0'? (
this.draw()
) : ''}

}

draw = () => {
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.fillRect(100, 100, 300, 150);
ctx.fillStyle ="rgb(0, 0, 0, 0.6)";
ctx.fill();
ctx.strokeStyle = "red";
}
render() {
return(
<div>
{localStorage.getItem('cookie_state') === '0'? (
<canvas id="canvas" width={document.body.clientWidth} height={document.body.scrollHeight}></canvas>
) : ''}
</div>
)
}

}

export default myConnect(
state => ({
...state.tradingCenter,
...state.appConfig,
mobile: state.userConfig.mobile,
email: state.userConfig.email,
precision: state.tokenConfig.precision,
tokenMap: state.tokenConfig.tokenMap,
tokenName: state.tokenConfig.tokenName,
istransaction: state.tokenConfig.istransaction,
tokenCNName: state.tokenConfig.tokenCNName
}),
dispatch => bindActionCreators(actions, dispatch)
)(TradingCenter);