如何使用地图传递道具

Question

我试图了解如何使用 map 函数向下传递道具。我在 renderFruits 函数中传递水果类型，在我的 Fruits 子组件中渲染水果类型。我不明白这段代码有什么问题。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Fruits from'./Fruits';

class App extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      fruits: [
        {
          type:'apple',
        },
        {
          type:'tomato',
        }
      ]
    };
  }
renderFruits = () => {
  const { fruits } = this.state;
    return fruits.map(item =>
      <Fruits
          type={item.type}
       />
        );
  }
  render() { 
    return (
      <div>
          {this.renderFruits}
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

水果组件，它应该渲染两个带有文本苹果和番茄的 div。

class Fruits extends Component {  
  render() {
    const { type } = this.props;
    return(
      <div>
        {type}
      </div>
    );
  }
}   
export default Fruits;

Answer 1

你的代码有两个问题
- 你应该在你的渲染函数中调用 renderFruits：this.renderFruits()
- 当你尝试渲染数组时应该使用“key”

renderFruits = () => {
   const { fruits } = this.state;
   return fruits.map( (item, index) =>
      <Fruits
          key={index}
          type={item.type}
      />
   );
  }
  render() { 
    return (
      <div>
          {this.renderFruits()}
      </div>
    );
  }