Question

我的顶级组件在其状态中具有练习。不同的练习存储在他们工作的身体部位下：

windows.applicationmodel.resources.resourceloader.getstring

从我的顶级组件我需要为每个bodypart加载一个子组件，并将该body组件的练习传递给它。如果我手动编码，它看起来像这样：

  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']
  }

我如何循环或映射我的状态，所以我不重复自己？

Answer 1

您可以使用Object.keys()获取对象的状态数组，然后使用map()从该数组中创建子组件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用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，但应将其替换为唯一标识符。

像这样：

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

Answer 3

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

我希望我已经关闭了所有括号。

Answer 4

您可以使用map循环遍历您的对象，并为每个项目返回Child组件及其相关道具

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

循环遍历状态中的命名对象并使用React传递给子组件？

4 个答案: