对 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
答案 0 :(得分:1)
Application
是一个组件,而 data
是一个道具,所以这段代码不会工作:
function Application(data) {
传递 data
的正确方法如下:
function Application({data}) {
或
const Application = ({data}) => {
答案 1 :(得分:1)
正如迈克尔所说,“应用程序是一个组件,数据是一个道具”
这意味着,您应该通过以下方式之一修改您的应用程序组件:
function Application({data}) {...}
或
const Application = ({data}) => {...}
这个语法意味着你正在解构函数的“props”参数,默认情况下它看起来像这样
const Application = (props) => {...}
这样你就必须在任何需要访问它的地方编写“props.data”,但你也可以访问不同的道具,比如默认的“props.children”,或者你会传递的任何其他道具到组件。
您需要做的另一件事是修改您使用组件的行
<Application data={data} />