我有一个需要向其传递数据的函数，如何传递参数？

Question

reactjs 有点新。在 reactjs 中使用 Visual Studio Code 构建我的 UI。 我需要将我的数据传递给应用程序，这是在这条线上完成的吗？ <Application />

我知道如何将数据传递给其他组件，但现在确定如何将数据传递给函数。

import React, { Component } from 'react';
import { Form, FormText } from 'react-bootstrap';
import Application from './CreateTable';
import fetchQuestionBankData from './RetrieveData'; 
export class CreateQuestionBank extends Component {
    static displayName = CreateQuestionBank.name;

    constructor(props) {
        super(props);
        this.state = {
            banks:[],            
            loading: true,           
            error: props.bError
        }
    }

    componentDidMount() {       
        this.setState({ banks: fetchQuestionBankData(5), loading:false }, () => { console.log("Retrieved 
       data") });
    }

   

    static renderTable() {
        return (
            <Application />                    
        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : CreateQuestionBank.renderTable();
        return (
            <div>
                <Form.Group>
                    <h1>Question Bank Creator</h1>
                    <Form.Group>                      
                        <br />
                        <Form.Group className="col-md-12">
                            <FormText className="showError">{this.state.error}</FormText>
                        </Form.Group>
                    </Form.Group>
                    {contents}
                </Form.Group >
            </div>
        );
    }
}

import React from 'react';
import styled from 'styled-components'
import { useTable } from 'react-table';         

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

这是我的函数应用程序，它从数据创建反应表，我想传递给它。

function Table({ columns, data }) {

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({ columns, data })

    return (
        // apply the table props
        <table {...getTableProps()}>
            <thead>
                {// Loop over the header rows
                    headerGroups.map(headerGroup => (
                        // Apply the header row props
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {// Loop over the headers in each row
                                headerGroup.headers.map(column => (
                                    // Apply the header cell props
                                    <th {...column.getHeaderProps()}>
                                        {// Render the header
                                            column.render('Header')}
                                    </th>
                                ))}
                        </tr>
                    ))}
            </thead>
            {/* Apply the table body props */}
            <tbody {...getTableBodyProps()}>
                {// Loop over the table rows
                    rows.map(row => {
                        // Prepare the row for display
                        prepareRow(row)
                        return (
                            // Apply the row props
                            <tr {...row.getRowProps()}>
                                {// Loop over the rows cells
                                    row.cells.map(cell => {
                                        // Apply the cell props
                                        return (
                                            <td {...cell.getCellProps()}>
                                                {// Render the cell contents
                                                    cell.render('Cell')}
                                            </td>
                                        )
                                    })}
                            </tr>
                        )
                    })}
            </tbody>
        </table>
    )
}

function Application(data) {

    const qColumns = React.useMemo(
        () => [
            {
                Header: "Question",
                columns: [
                    {
                        Header: "Type",
                        accessor: "QuestionTypeAbbrev",
                        width: 75
                    },
                    {
                        Header: "Points",
                        accessor: "PointsAwarded",
                        width: 75
                    },
                    {
                        Header: "Question",
                        accessor: "QuestionText",
                        minWidth: 225
                    }


                ]
            }
        ],
        []
    );

  

    return (       
            <Styles>
                <Table columns={qColumns} data={data} />
            </Styles>         
    )
}
export default Application

Answer 1

Application 是一个组件，data 是一个道具，所以这段代码不会工作：

function Application(data) {

传递data的正确方法如下：

function Application({data}) {

或

const Application = ({data}) => {

Answer 2

正如迈克尔所说，“应用程序是组件，数据是道具”

这意味着，您应该通过以下方式之一修改您的应用程序组件：

function Application({data}) {...}

或

const Application = ({data}) => {...}

这个语法的意思是你正在解构你的函数的“props”参数，默认情况下看起来像这样

const Application = (props) => {...}

这样，您必须在需要访问它的任何地方编写“props.data”，但您也可以访问不同的道具，例如默认的“props.children”，或您将传递的任何其他道具到组件。

您需要做的另一件事是修改使用组件的行

<Application data={data} />