Question

我正在做一个React项目。在我的项目中，我有三个部分：家庭，学生列表，卡片。

我的问题是通过props将数据从Studentslist组件传递到Card组件，我知道为什么不起作用。

我之所以将它从“学生列表”传递到Card，是为了重用具有不同名称的Card组件。

如果我对我的问题不够清楚，请发表评论！

在我的组件代码下面：

这是Studentslist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist(props) {
    const [show, setShow] = useState(false);
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Hockey</button>
                        <button onClick={() => setShow(true)} className='btn btn-primary ml-2'>Cricket</button>
                    </div>
                    <div className='table-responsive'>
                        <table className='table align-items-center table-flush'>
                            <thead className='thead-light'>
                                <tr>
                                    <th scope='col'>No:</th>
                                    <th scope='col'>Firstname</th>
                                    <th scope='col'>Lastname</th>
                                    <th scope='col'>Email</th>
                                    <th scope='col'>Password</th>
                                    <th scope='col'>Qualification</th>
                                    <th scope='col'>Branch</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    {show && <Card setShow={() => setShow(false)}
                        firstname={'Firstname'}
                        lastname={'Lastname'}
                    >
                    </Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

这是Card.js

import React, { useState } from 'react';
import './Card.css';

function Card({ setShow }, props) {
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">{props.firstname}</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">{props.lastname}</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">{props.email}</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">{props.password}</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="qualification">{props.qualification}</label>
                                <input type="text" className="form-control" id="qualification"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="branch">{props.branch}</label>
                                <input type="text" className="form-control" id="branch"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button type="button" onClick={setShow} className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

Answer 1

问题是您的Card定义：

function Card({ setShow }, props) {
    return (...)
}

应该是：

function Card(props) {
    const { setShow } = props;
    return (...)
}

因为setShow包含在props组件的Card中

Answer 2

我认为function Card({ setShow }, props)将从props中获取setShow，但不会定义第二个参数'props'

您应该使函数组件声明函数为Card(props) {}，然后以props.setShow()的身份访问setShow

如何将prop作为参数传递给React中的变量

2 个答案: