admin管理员组

文章数量:1023848

I have these React classes

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        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>
        );
    }
};

Chart looks like this

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

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

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

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

Why?

I have these React classes

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        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>
        );
    }
};

Chart looks like this

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

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

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

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

Why?

  • javascript
  • reactjs
Share Improve this question edited Oct 5, 2015 at 7:45 Felix Kling 818k181 gold badges1.1k silver badges1.2k bronze badges asked Oct 5, 2015 at 5:48 praks5432praks5432 7,81232 gold badges93 silver badges158 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

Only top level ponents are actually rendered in the render method. When you put your Bar ponent inside your Chart ponent you're actually just passing Bar as a property of Chart.

React allows you to access this as this.props.children of your Chart ponent. So the render method of your chart ponent should be...

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

Further reading: https://facebook.github.io/react/docs/multiple-ponents.html

I have these React classes

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        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>
        );
    }
};

Chart looks like this

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

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

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

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

Why?

I have these React classes

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        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>
        );
    }
};

Chart looks like this

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

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

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

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

Why?

  • javascript
  • reactjs
Share Improve this question edited Oct 5, 2015 at 7:45 Felix Kling 818k181 gold badges1.1k silver badges1.2k bronze badges asked Oct 5, 2015 at 5:48 praks5432praks5432 7,81232 gold badges93 silver badges158 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

Only top level ponents are actually rendered in the render method. When you put your Bar ponent inside your Chart ponent you're actually just passing Bar as a property of Chart.

React allows you to access this as this.props.children of your Chart ponent. So the render method of your chart ponent should be...

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

Further reading: https://facebook.github.io/react/docs/multiple-ponents.html

本文标签： javascriptReact render method not called for nested componentStack Overflow

版权声明：本文标题：javascript - React render method not called for nested component - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745512288a2153878.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。