react 嵌套渲染_不为嵌套组件调用React渲染方法(React render method not called for nested component)...

I have these React classes

class App extends React.Component {

constructor(props) {

super(props);

}

componentDidMount() {

const { dispatch } = this.props;

var props = this.props;

dispatch(fetchDistricts('California'));

}

render() {

return (

height={this.props.height}>

width={this.props.width}

height={this.props.height}>

);

}

};

Chart looks like this

export default class Chart extends React.Component {

render() {

return (

height={this.props.height}>

);

}

};

And Bars looks like this

export default class Bar extends React.Component {

shouldComponentUpdate(nextProps) {

debugger

return this.props.data !== nextProps.data;

}

render() {

debugger

let props = this.props;

let data = props.data.map((d) =>

{

return d.y;

}

);

let yScale = d3.scale.linear()

.domain([0, d3.max(data)])

.range([0, this.props.height]);

let xScale = d3.scale.ordinal()

.domain(d3.range(this.props.data.length))

.rangeRoundBands([0, this.props.width], 0.05);

let bars = data.map((point, i) => {

var height = yScale(point),

y = props.height - height,

width = xScale.rangeBand(),

x = xScale(i);

return (

width={width}

x={x}

y={y}

key={i}>

);

});

return (

{bars}

);

}

};

the debuggers in Bars aren't called - the render method is not called.

Why?