阵营数据流进一个单独的组件文件

问题描述：

<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待办事项这个数据组件在一个单独的文件：

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

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

export default Data;` 
</code>

我怎么会去这样做？我试图在网上查找资源，但它只显示通过单个组件传递的数据。预先感谢您，请您帮如果你能〜

答

可以待办事项数据传递的道具数据部件：

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

答

只需通过todos到您的Data组件，使用<Data todos={this.state.todos} />从您的App组件。然后，您可以使用类似于Data组件的todos：

class Data extends Component { 
    render() { 
    return (
     <ul> 
     { 
     this.props.todos.map(todo => <li>{todo.todoTitle}</li>) 
     } 
     </ul> 
    ) 
    } 
}

阵营数据流进一个单独的组件文件

相关推荐