状態の名前付きオブジェクトをループし、Reactで子コンポーネントに渡しますか？

Question

私のトップレベルのコンポーネントは、その状態でエクササイズしています。

exercises: { 
    chestAndTriceps: ['Push up', 'Bench press', 'Dumbbell bench press', 'Mountain climbers'], 
    backAndBicep: ['Pull up', 'Chin up', 'Dumbbell curl', 'Horizontal row'], 
    core: ['plank', 'Sit ups', 'Crunches'] 
    } 

私のトップレベルのコンポーネントから、私は、各ボディ部の子コンポーネントをロードし、またそれにその身体の部分のための演習に合格する必要があります：異なるエキソサイズは、それらが動作することを身体の部分の下に格納されています。私はこれをコーディングした場合、手動で次のようになります。

<Child 
    bodyPart={chestAndTriceps} 
    exercises={this.state.exercises.chestAndTriceps} 
/> 
<Child 
    bodyPart={backAndBicep} 
    exercises={this.state.exercises.backAndBicep} 
/> 
<Child 
    bodyPart={core} 
    exercises={this.state.exercises.core} 
/> 

がどのように私はイムので、私の状態をループまたはマップ自分自身を繰り返すことはできませんか？

Answer 1

Object.keys(exercises).map((exercise, index) => <Child bodyPart={exercise} exercises={this.state.exercises[exercise]} key={index} />) 

括弧をすべて外しておきたいと思います。

Answer 2

その後、あなたがオブジェクトをループにはマップを使用することができ、すべてのアイテムのためにあなたはあなたが状態で、オブジェクトのキーの配列を取得するためにObject.keys()を使用することができ、その関連小道具

map(this.state.exercises, (oneChild, key) => { 
return (
    <Child key={key} bodyPart={key} exercises={oneChild} /> 
)} 

Answer 3

とChildコンポーネントを返却し、 map()を使用して、その配列から子コンポーネントを作成します。

let Child = (props) => { 
 
    return (
 
    <ol> 
 
     {props.exercises.map((el, i) => { 
 
     return <li key={i}>{el}</li> 
 
     })} 
 
    </ol> 
 
) 
 
} 
 

 
class Parent extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     exercises: { 
 
     chestAndTriceps: ['Push up', 'Bench press', 'Dumbbell bench press', 'Mountain climbers'], 
 
     backAndBicep: ['Pull up', 'Chin up', 'Dumbbell curl', 'Horizontal row'], 
 
     core: ['plank', 'Sit ups', 'Crunches'] 
 
     } 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return Object.keys(this.state.exercises).map(name => { 
 
     return <Child key={name} exercises={this.state.exercises[name]} /> 
 
    }) 
 
    } 
 
} 
 

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

<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script> 
 
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script> 
 

 
<div id="app"></div>

Answer 4

することはでき体の部分とexcersisesはObject.keys(this.state.exercises)を使用して<Child />コンポーネントの配列を返してループ：

Object.keys(this.state.exercises).map((bodyPart, id) => { 
    return (
    <Child 
     key={id} 
     bodyPart={bodyPart} 
     exercises={this.state.exercises[bodyPart]} 
    /> 
) 
}) 

注：私は、反復子のインデックスを使用しましたkeyとしてください。ただし、これは一意の識別子に置き換えてください。このよう

：

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     exercises: { 
 
     chestAndTriceps: ['Push up', 'Bench press', 'Dumbbell bench press', 'Mountain climbers'], 
 
     backAndBicep: ['Pull up', 'Chin up', 'Dumbbell curl', 'Horizontal row'], 
 
     core: ['plank', 'Sit ups', 'Crunches'] 
 
     } 
 
    }; 
 
    } 
 

 
    render() { 
 
    const result = Object.keys(this.state.exercises).map((bodyPart, id) => { 
 
     return (
 
     <Child 
 
      key={id} 
 
      bodyPart={bodyPart} 
 
      exercises={this.state.exercises[bodyPart]} 
 
     /> 
 
    ) 
 
    }) 
 
     
 
    return (
 
     <div> 
 
     {result} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
function Child(props) { 
 
    return (
 
    <div> 
 
     <strong>{props.bodyPart}</strong> 
 
     <ul> 
 
     {props.exercises.map((exercise, id) => <li key={id}>{exercise}</li>)} 
 
     </ul> 
 
    </div> 
 
) 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 

 
<div id="app"></div>