React 如何将参数传递给函数

Question

嗨，我发现了一个问同样问题的问题，但他们使用“类名扩展”编码完全不同，我只是使用“函数名称”。 我想知道我将如何解决这个问题，或者我是否必须重写我的程序。

我在底部留下了样式。

窗口.js

import React from 'react';
import "../css/Start.css";



export default function Window(nuts) {

    let ulList=[]
    for (let i=0;i<nuts.file.length;i++) {
      ulList.push(<li>
        {
            nuts.file[i]
        }
      </li>)
    }


    let imageList=[]
    for (let i=0;i<nuts.image.length;i++) {
        imageList.push(<img src={nuts.image[i]} alt={nuts.image[i]}/>)
    }


    return (
        <div style={main}>
            <p>{nuts.name}</p>
            <p>{nuts.date}</p>
            <p>{nuts.note}</p>
          {ulList}
          {imageList}
          <button> Demo </button>


        </div>
    );
  }

项目.js

import React from 'react';
import Background from '../images/projectbackground.jpg';
import "../css/Start.css";
import Window from './Window'



export default function Project() {

  const files = ['f1','f2','f3']
  const images = ['p1','p2','p3']
  const nuts = {name:'phil',date:'2/2/16',note:'this is a note',file:files,image:images}

  return (
      <div style={main}>
          <Window nuts={nuts}/>
          <div style={footer}>

          </div>
      </div>
  );
}

Answer 1

您的函数组件将在一个对象中一起传递所有属性。

您可以进行三项更改以完成这项工作：

• render <Window {...{nuts}} />代替（不推荐但可以选择）
• 将参数更改为function Window(props)和所有其他代码来表示props.nuts而不仅仅是nuts
• 将参数更改为function Window({nuts})以解构（不再命名）“道具”对象

Answer 2

nuts通过props对象传递给Window 。

您需要在线或在您的函数体中解构nuts 。

function Window({ nuts }) 

或者

function Window(props) {
    const { nuts } = props;
}