Question

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

我在底部没有样式。

Window.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>
    );
  }

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

您的function component将在对象中一起传递 all 所有属性。

您可以进行以下三项更改：

改为渲染<Window {...{nuts}} />（不推荐，但可以选择）
将参数更改为function Window(props)，并将所有其他代码更改为props.nuts，而不仅仅是nuts
将参数（不再命名）“ props”对象从function Window({nuts})更改为destructure

Answer 2

nuts通过Window对象传递给props。

您需要内联或在函数主体中分解nuts。

function Window({ nuts })

或

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

React如何将参数传递给函数

2 个答案: