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

水果组件应该使用文本apple和tomato呈现两个div。

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

Answer 1

您的代码中有两个问题 - 你应该在你的渲染函数中调用renderFruits：this.renderFruits（）
- 当你尝试渲染数组时，应该使用＆＃34; key＆＃34;

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

如何使用地图传递道具

1 个答案: