reactjsを押して、親シェルにクローズ状態を戻します。

Question

私はreactjsを初めて使用しています。親のシェルにクリック状態を戻す方法がわかりません。私が構築しているコンポーネントの中には、d3.jsチャートがあります。データの表示を容易にしたいが、ユーザがノードを選択してデータをドリルダウンできるようにしておきます。

円グラフのセグメントをクリックすると、onclickセクションが取得され、そのノードのID /データが親に戻されます。だからここ

//チャートのデモ http://jsfiddle.net/Qh9X5/10980/

はいつでも通信できるデモ

//偽の円グラフ

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import * as d3 from "d3"; 

class DoughPieChart extends Component { 
    componentDidMount() { 
     var $this = $(ReactDOM.findDOMNode(this)); 


     var svg = d3.select($this[0]) 
      .append("svg") 
      .append("g") 

     svg.append("g") 
      .attr("class", "slices"); 
     svg.append("g") 
      .attr("class", "labels"); 
     svg.append("g") 
      .attr("class", "lines"); 

     var width = 560, 
      height = 450, 
      radius = Math.min(width, height)/2; 

     var pie = d3.layout.pie() 
      .sort(null) 
      .value(function(d) { 
       return d.value; 
      }); 

     var arc = d3.svg.arc() 
      .outerRadius(radius * 0.85) 
      .innerRadius(radius * 0.83); 

     var outerArc = d3.svg.arc() 
      .innerRadius(radius * 0.9) 
      .outerRadius(radius * 0.9); 

     svg.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

     var key = function(d){ return d.data.label; }; 

     var color = d3.scale.ordinal() 
      .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"]) 
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]); 

     function randomData(){ 
      var labels = color.domain(); 
      return labels.map(function(label){ 
       return { label: label, value: Math.random() } 
      }); 
     } 


     console.log("randomData()", randomData()); 
     change(randomData()); 

     d3.select(".randomize") 
      .on("click", function(){ 
       change(randomData()); 
      }); 

      function click(d){ 
      console.log("d", d); 
      } 


     function change(data) { 

      /* ------- PIE SLICES -------*/ 
      var slice = svg.select(".slices").selectAll("path.slice") 
       .data(pie(data), key); 

      slice.enter() 
       .insert("path") 
       .style("fill", function(d) { return color(d.data.label); }) 
       .attr("class", "slice"); 

      slice  
       .transition().duration(1000) 
       .attrTween("d", function(d) { 
        this._current = this._current || d; 
        var interpolate = d3.interpolate(this._current, d); 
        this._current = interpolate(0); 
        return function(t) { 
         return arc(interpolate(t)); 
        }; 
       }) 

      slice.exit() 
       .remove(); 

      slice.on("click", function(d){ 
      click(d) 
      }) 

     }; 

    } 

    render() { 
     return (
      <div 
       className="doughpiechart" 
       data-role="doughpiechart" 
       data-width={this.props.width} 
       data-height={this.props.height} 
       data-data={this.props.data}> 
      </div> 
     ); 
    } 
}; 

export default DoughPieChart; 

//親シェル

import React, { Component } from 'react' 
import { NavLink, withRouter, Redirect } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { fetchDrilldown } from '../../actions/drilldownAction'; 

// components 
import DoughPieChart from './DoughPieChart' 

class Parent extends Component { 

    constructor(props, context) { 
    super(props, context); 
    this.submit = this.submit.bind(this); 
    } 

    submit(data) { 
    this.props.fetchDrilldown(data); 
    } 

    render() { 
    return (
     <div> 
     <DoughPieChart onClickSegment={this.submit} /> 
     </div> 
    ) 
    } 

} 

function mapStateToProps(state) { 
    return { 
    drilldownData: state.drilldown 
    }; 
} 

function mapDispatchToProps(dispatch) { 
return bindActionCreators({ fetchDrilldown }, dispatch); 
} 

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent)) 

Answer 1

ですReactで子コンポーネントと親コンポーネントの間で簡単に。ステートを一貫して保つには、子コンポーネントからボタンをクリックし、親のステート/データを更新してレンダリングする手順を実行します。

1. 親の状態を保持する状態変数を作成します。親コンポーネント。例えば、IDやデータ
2. は、親状態を更新し、子コンポーネントへ
3. をそれを渡すように関数を作成し、作成した親状態変数を更新するために、上記の関数を呼び出すステップ1

ので、サンプルコードは次のようになります。 を親コンポーネントで：

constructor(props, context) { 
    super(props, context); 
    this.submit = this.submit.bind(this); 
    this.state.data = null; 
    this.setParentState = this.setParentState.bind(this); 
    } 

    setParentState(obj) { 
    Object.keys(obj).forEach((key) => { 
     this.setState({ 
     [key]: obj[key] 
     }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <DoughPieChart setParentState={this.setParentState} /> 
     </div> 
    ) 
    } 

そして、あなたの子コンポーネントにあなたが呼び出すことができます

this.props.setParentState({ 
    data: THE_DATA_YOU_WANT_TO_UPDATE 
    }) 

親状態を更新し、それを親コンポーネントに表示します。

あなたにとって理にかなっていると思います。