React.jsのあるコンポーネントから別のコンポーネントにstate.data.lengthを送る方法

Question

私は編集と削除の機能を持つ単純なリストを作っています。今私はリストのデータからパイチャートを作ることを考えています。

私が苦労しているのは、1つのコンポーネント内のリスト長のデータを別のコンポーネントに渡して、パイチャートを作成することです。

どのようにしてこの種類のデータをあるコンポーネントから別のコンポーネントに渡すことができますか？

List.js

これはList.jsファイルです。 this.state.questionItem.lengthを別のファイルの別のコンポーネントに渡したいとします。

const questionItem = [ { item : 'Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor?', id : 1 
}, { item : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor?', id : 2 
}, { item : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor?', id : 3 
}, { item : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor?', id : 4 
} 
] 

export default class List extends React.Component { 
constructor(props){ 
    super(props); 
    this.state={ 
     questionItem 
    }; 
} 

createItem(item){ 
    this.state.questionItem.unshift({ 
     item : item, 
    }); 
    this.setState({ 
     questionItem : this.state.questionItem 
    }); 
    console.log(this.state.questionItem.length) 
} 

findItem(item) { 
    return this.state.questionItem.filter((element) => element.item === item)[0]; 
} 

toggleComplete(item){ 
    let selectedItem = this.findItem(item); 
    selectedItem.completed = !selectedItem.completed; 
    this.setState({ questionItem : this.state.questionItem }); 
} 

saveItem(oldItem, newItem) { 
    let selectedItem = this.findItem(oldItem); 
    selectedItem.item = newItem; 
    this.setState({ questionItem : this.state.questionItem }); 
    } 

deleteItem(item) { 
    let index = this.state.questionItem.map(element => element.item).indexOf(item); 
    this.state.questionItem.splice(index, 1); 
    this.setState({ questionItem : this.state.questionItem }); 
} 

render() { 
    return (
    <div className="list" style={{"display" : "flex"}}> 
    <div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div> 
    <div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}> 
    <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)} saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} /> 
    <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} /> 
    </div> 
    </div>); 
} 

Chart.js

class Categories extends React.Component{ 
{ I want to receive the data of item length here } 
render(){ 
    return(<div> 
      <div id="chart" > 
       <p> pi chart comes hire</p> 
      </div> 
      <List /> 
      </div> 
      </div> 
    ) 
} 

事前にご協力いただきありがとうございます..！

Answer 1

私はあなたのポイントを得たかどうかwheterわからないんだけど、あなたはあなたのチャートにthis.state.questionItem.lengthを送信する場合：

これはあなたのケースではない場合、私はので、私は答えを削除教えてください:)

class Chart extends React.Component { 
 
    render() { 
 
    const { length } = this.props 
 
    
 
    return (
 
     <div>Chart: {length}</div> 
 
    ) 
 
    } 
 
} 
 

 
class List extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     questionItem: [ 
 
     { 
 
      item: 'Lorem ipsum dolor sit amet, consectetur', 
 
      id: 1 
 
     }, 
 
     { 
 
      item: 'Lorem ipsum dolor sit amet, consectetur', 
 
      id: 2 
 
     }, 
 
     { 
 
      item: 'Lorem ipsum dolor sit amet, consectetur', 
 
      id: 3 
 
     }, 
 
     { 
 
      item: 'Lorem ipsum dolor sit amet, consectetur', 
 
      id: 4 
 
     }, 
 
     ], 
 
    } 
 
    } 
 
    
 
    render() { 
 
    const { questionItem } = this.state 
 
    return (
 
     <div> 
 
     <Chart length={questionItem.length} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<List />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>