陣營渲染方法不要求嵌套的組件

Question

我有這些陣營類

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> 
    ); 
    } 
}; 

在酒吧調試器沒有被調用 - 渲染方法沒有被調用。

爲什麼？

Answer 1

只有頂層組件實際上呈現在渲染方法中。當您將Bar組件放入Chart組件中時，實際上只是將Bar作爲Chart的屬性傳遞。

React允許您以圖表組件的this.props.children的身份訪問它。所以，你的圖表組件的渲染方法應該是...

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

延伸閱讀：https://facebook.github.io/react/docs/multiple-components.html