Два набора данных в одном компоненте

Question

я передаю данные к компоненту, не вопрос - однако, я бы сейчас хотел бы повторно использовать этот компонент с другим набором данных:

import React from 'react'; 

const people = [{ 
    id: 1, 
    name: "John", 
    age: 32, 
    hobby: "jogging", 
    },{ 
    id: 2, 
    name: "John", 
    age: 32, 
    hobby: "jogging", 
}]; 

const cars = [{ 
    id: 1, 
    manufacturer: "Ford", 
    model: "Focus", 
    year: "2014", 
    },{ 
    id: 2, 
    manufacturer: "Honda", 
    model: "Civic", 
    year: "2012", 
}]; 

export default function ListGroup(props) { 
    return (
    <div> 
     {props.people.map((person) => 
     <li key={person.id}> 
      <p>Name: {person.name}</p> 
      <p>Hobby: {person.hobby}</p> 
     </li> 
    )} 
    </div> 
); 
} 

выше код отлично работает для светильника people, но для использования того же компонента я не уверен, каким может быть самый простой путь. Любое руководство приветствуется.

Answer 1

Итерация над идами с использованием Object.keys(component).map(function(attributes){}. Я представил его как компонент, который вы можете использовать как функцию. Надеюсь, вы сможете преобразовать его в то, как вы хотите его использовать.

class ListGroup extends React.Component { 
 
constructor(props) { 
 
    super(props); 
 
} 
 
render() { 
 
    return (
 
    <div> 
 
     {this.props.value.map((component) => { 
 
     
 
     return (
 
     <li key={component.id}> 
 
      {Object.keys(component).map(function(attributes) { 
 
       
 
       return (
 
       <p>{attributes} : {component[attributes]}</p> 
 
       ) 
 
      }, this)} 
 
      
 
     </li> 
 
     ) 
 
     })} 
 
    </div> 
 
); 
 
} 
 

 

 
} 
 

 
class Hello extends React.Component { 
 
constructor() { 
 
    super(); 
 
} 
 

 
    
 
    render() { 
 
    const people = [{ 
 
    id: 1, 
 
    name: "John", 
 
    age: 32, 
 
    hobby: "jogging", 
 
    },{ 
 
    id: 2, 
 
    name: "John", 
 
    age: 32, 
 
    hobby: "jogging", 
 
}]; 
 

 
const cars = [{ 
 
    id: 1, 
 
    manufacturer: "Ford", 
 
    model: "Focus", 
 
    year: "2014", 
 
    },{ 
 
    id: 2, 
 
    manufacturer: "Honda", 
 
    model: "Civic", 
 
    year: "2012", 
 
}]; 
 
     return (
 
     <div> 
 
      <ListGroup value={people} /> 
 
      <ListGroup value={cars} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Hello /> ,document.getElementById('app'));

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