javascript - 将数据流 react 到一个单独的组件文件中

Question

假设我在 React 中有这个主要的 js 文件:

<code>
import React, { Component } from 'react';
import Data from './components/data';
import './App.css';

var todos = [
  {
    todoTitle: "My first todo",
    todoResponsible: "Kevin",
    todoDescription: "My first todo description",
    todoPriority: "low"
  },
  {
    todoTitle: "My second todo",
    todoResponsible: "Sam",
    todoDescription: "My second todo description",
    todoPriority: "medium"
  },
  {
    todoTitle: "My third todo",
    todoResponsible: "Hobbs",
    todoDescription: "My Third todo description",
    todoPriority: "high"
  }
]

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos
    };
  }

  `render() {
    return (
      <div className="App">
      <Data />
      </div>`
    );
  }
}

export default App;
</code>

---

如果我想将 var todos 中的数据在单独的文件中传递给此组件:

<code>
`import React, { Component } from 'react';

`class Data extends Component {
  render(){
    return(
      <ul>
        <li>
        </li>
      </ul>`
    );
  }
}

export default Data;`
</code>

我将如何着手这样做？我试图在网上寻找资源，但它只显示通过单个组件传递数据。 在此先感谢您，如果可以的话请帮忙~

Answer 1

您可以将待办事项数据作为 Prop 传递给数据组件:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos
    };
  }

  `render() {
    return (
      <div className="App">
      <Data todos={this.state.todos} />
      </div>`
    );
  }
}

在数据组件中，您可以通过 this.props.todos 轻松访问它们:

class Data extends Component {
  render(){
    console.log(this.props.todos);
    return(
      <ul>
        <li>
        </li>
      </ul>`
    );
  }
}