javascript - Rendera React-komponenter från en array av objekt

Jag har några data som kallas stations som är en array som innehåller objekt.

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

Jag skulle vilja rendera en UI-komponent för varje position i arrayen. Hittills kan jag skriva

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

Och sedan rendera

render(){
 return (
   {stationsArr}
 )
}

Problemet är att jag får all data utskriven. Jag vill istället bara visa en nyckel som {this.data.call}, men det skrivs ut inget.

Hur kan jag loopa igenom dessa data och returnera ett nytt UI-element för varje position i arrayen?

Svar #1

Du kan kartlägga listan över stationer till ReactElement.

Med React >= 16 är det möjligt att returnera flera element från samma komponent utan att behöva ett extra HTML-element som omslag. Sedan 16.2 finns en ny syntax <> för att skapa fragment. Om detta inte fungerar eller inte stöds av din IDE kan du istället använda <React.Fragment>. Mellan 16.0 och 16.2 kan du använda en mycket enkel polyfill för fragment.

Prova följande

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div key={station.call} className='station'>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});
 
var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

Glöm inte key-attributet!

https://jsfiddle.net/69z2wepo/14377/

Svar #2

Jag har ett svar som kanske är lite mindre förvirrande för nybörjare som jag själv. Du kan helt enkelt använda map inom komponentens renderingsmetod.

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}

Relaterade artiklar