不为嵌套组件调用React渲染方法

Question

我有这些React类

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { dispatch } = this.props;
        var props = this.props;
        dispatch(fetchDistricts('California'));
    }

    render() {
        return (
            <div class="app">
                <Chart width={this.props.width}
                    height={this.props.height}>
                <Bar data={this.props}
                    width={this.props.width}
                    height={this.props.height}>
                </Bar>
                </Chart>
            </div>
        );
    }
};

图表看起来像这样

export default class Chart extends React.Component {
    render() {
        return (
            <svg width={this.props.width} 
                height={this.props.height}>
            </svg>
        );
    }
};

酒吧看起来像这样

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 (
                <Rect height={height}
                    width={width}
                    x={x}
                    y={y}
                    key={i}>
                </Rect>
            );
        });

    return (
        <g>{bars}</g>
    );
    }
};

Bars中的调试器未调用-render方法未调用。

为什么？

Answer 1

实际上，仅顶级组件在render方法中渲染。当您将Bar组件放入Chart组件时，实际上只是将Bar作为Chart的属性传递。

React允许您从this.props.childrenChart组件开始访问它。因此，图表组件的render方法应为...

render() {
    return (
        <svg>
            {this.props.children}
        </svg>
    )
}

进一步阅读：https : //facebook.github.io/react/docs/multiple-components.html