Question

我正在创建一个具有编辑和删除功能的简单列表。现在我想从列表数据中制作一张pi图表。

我正在努力的是将一个组件中的列表长度数据传递给另一个组件以制作pi图表。

如何将这种数据从一个组件传递到另一个组件？

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

我不确定我是否明白了，但是如果你想将this.state.questionItem.length发送到你的图表：

如果不是这种情况，请告诉我，以便我删除答案:)

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

如何将state.data.length从一个组件发送到React.js中的不同组件

1 个答案: