객체 배열에서 리액트 컴포넌트 렌더링

객체 배열에서 리액트 컴포넌트 렌더링

저는 스테이션이라고 하는 데이터를 가지고 있습니다.이것은 오브젝트를 포함한 배열입니다.

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

각 어레이 위치에 대한 UI 구성 요소를 렌더링하고 싶습니다.아직까지는 쓸 수 있다

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

그리고 렌더링

render(){
 return (
   {stationsArr}
 )
}

문제는 제가 모든 데이터를 출력하고 있다는 거예요.대신 이런 열쇠를 보여드리고 싶어요.{this.data.call}아무것도 출력되지 않습니다.

이 데이터를 루프하여 어레이의 각 위치에 대해 새로운 UI 요소를 반환하려면 어떻게 해야 합니까?

스테이션 목록을 ReactElements에 매핑할 수 있습니다.

React > = 16을 사용하면 별도의 html 요소 래퍼 없이 동일한 구성 요소에서 여러 요소를 반환할 수 있습니다.16.2 이후 프래그먼트를 작성하기 위한 새로운 구문 <>이 추가되었습니다.이것이 동작하지 않거나 IDE에서 지원되지 않는 경우<React.Fragment>대신.16.0에서 16.2 사이에서는 매우 단순한 폴리필을 fragment에 사용할 수 있습니다.

다음을 시도합니다.

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

잊지 마세요key속성!

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

나 같은 신입사원들에겐 좀 덜 혼란스러울 것 같은 답이 있다.그냥 사용하시면 됩니다.map컴포넌트 렌더 메서드 내에 있습니다.

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

this.data에는 모든 데이터가 포함되어 있을 가능성이 높기 때문에 다음과 같은 작업을 수행해야 합니다.

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

또는 를 사용할 수 있습니다.map및 화살표 기능은 ES6를 사용하는 경우 다음과 같습니다.

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);

이것은 당신이 찾고 있는 것을 달성하기 위한 가장 간단한 방법입니다.

이것을 사용하기 위해서map이 경우, 우리는 이 기능을 통과해야 합니다.currentValue(항상 필수) 파라미터와index(임의) 파라미터.다음 예시는station우리의currentValue,그리고.x우리의index.

station는 어레이 내의 오브젝트가 반복될 때의 현재 값을 나타냅니다. x는 자동으로 증가합니다.새로운 오브젝트가 매핑될 때마다 1씩 증가합니다.

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

Thomas Valadez가 답변한 내용은 객체 배열에서 컴포넌트를 렌더링하는 최적의 간단한 방법을 제공했지만 이 프로세스에서 키를 할당하는 방법을 제대로 다루지 못했습니다.

사용할 수 있는 방법이 몇 가지 있습니다.

const stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
];
const callList = stations.map(({call}) => call)

솔루션 1

<p>{callList.join(', ')}</p>

솔루션 2

<ol>    
  { callList && callList.map(item => <li>{item}</li>) }
</ol>

물론 다른 방법도 있습니다.

언급URL : https://stackoverflow.com/questions/32157286/rendering-react-components-from-array-of-objects