Question

在示例1中，我可以通过将函数作为道具传递给子组件来映射函数，但是，如果我不想将函数作为道具传递给子组件怎么办，我该如何在函数中映射函数呢？主要组件本身，如示例2所示。

示例1。

class App extends React.Component {
  render() {
    return(
     <div>
       <Foo data={data()} />
      </div>
    )
  }
}

class Foo extends React.Component {
  render() {
   return (
      <div>
        {this.props.data.map(item => {
          return (
             <div>{item.id} {item.name}</div>
           )
        })}
      </div>
    )
  }
}


function data() {
  return (
   [
     {id: 1, name: "Jack"},
     {id: 2, name: "Mark"},
     {id: 3, name: "Mike"},
     {id: 4, name: "Russell"}
   ]
  )
}

示例2。

class App extends React.Component {
  render() {
    return(
     <div>
       {this.data().map(() => {
          //I know this is not correct so what is the right way.
        })}           
      </div>
    )
  }
}


function data() {
  return (
   [
     {id: 1, name: "Jack"},
     {id: 2, name: "Mark"},
     {id: 3, name: "Mike"},
     {id: 4, name: "Russell"}
   ]
  )
}

Answer 1

这似乎是您想要的。

class App extends React.Component {
  render() {
    return(
     <div>
       {data().map(item => {
           return (
              <div>{item.id} {item.name} </div>
           )
       })}           
      </div>
    )
  }
}


function data() {
  return (
   [
     {id: 1, name: "Jack"},
     {id: 2, name: "Mark"},
     {id: 3, name: "Mike"},
     {id: 4, name: "Russell"}
   ]
  )
}

如何在React中映射函数返回数组

1 个答案: