Console.loging证明作为道具传递给子组件的父级状态值分别为String和Function。但是，当我尝试在子组件中使用它们时，它们是[object Object]。
}, []);
return (
<Fragment>
{/** Show Lightbox */}
{console.log('img selected Parent: ' + imgToShow)}
{console.log('Toggle Parent: ' + setShowLightBox)}
{showLightBox && imgToShow && <LightBox img={imgToShow} toggle={setShowLightBox} />}
const LightBox = (img, toggle) => {
return (
<Fragment>
{console.log('img received: ' + img)}
{console.log('Toggle received:' + toggle)}
<div className="light-box">
<div className="inner">
<i onClick={() => toggle(false)} class="far fa-times-circle"></i>
img selected Parent: text-img-example.jpg
shop-dashboard.js:75 Toggle Parent: function () { [native code] }
light-box.js:5 img received: [object Object]
light-box.js:5 Toggle received:[object Object]
子组件代码：
import React, { Fragment } from 'react';
const LightBox = (img, toggle) => {
return (
<Fragment>
{console.log('img received: ' + img)}
{console.log('Toggle received:' + toggle)}
<div className="light-box">
<div className="inner">
<i onClick={() => toggle(false)} class="far fa-times-circle"></i>
<img src={require('../../img/text-img-example.jpg')}></img>
</div>
</div>
</Fragment>
);
};
export default LightBox;
父项：
import React, { useEffect, useState, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import Navbar from '../navbar/navbar';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { InputSwitch } from 'primereact/inputswitch';
import { Rating } from 'primereact/rating';
import { TabView, TabPanel } from 'primereact/tabview';
/** Partials */
import CardCarousel from '../partials/card-carousel';
import ChartComp from '../partials/chart';
import DataViewComp from '../partials/data-view';
import InfoSection from '../partials/info-section';
import ItemCreation from '../partials/item-creation';
import ItemEdition from '../partials/item-edition';
import LightBox from '../partials/light-box';
import TextArea from '../partials/text-area';
import JumboFooter from '../partials/jumbo-footer';
import JumboHeader from '../partials/jumbo-header';
import PrimeSpinner from '../partials/spinner';
import SectionCreation from '../partials/section-creation';
/** Function */
import { getShop, getCurrentUser, getShopProducts } from '../../actions/requests';
import { setAlert } from '../../actions/alerts';
const ShopDashboard = ({ history, match, setAlert }) => {
// Logged in User
const [currentUser, setCurrentUser] = useState(null);
// Shop
const [shop, setShop] = useState(null);
// Dashboard (set view for costumer orshop owner)
const [dashboard, setDashboard] = useState(false);
//
const [checked1, setChecked1] = useState(false);
// Product Creation Dialog
const [productCreation, setProductCreation] = useState(false);
// Tabs
const [activeIndex, setActiveIndex] = useState();
// Reviewjumbo-container
const [reviewText, setReviewText] = useState('Enter text here');
// Section Creation Dialog
const [sectionCreation, setSectionCreation] = useState(false);
// Change Shop Values States
const [edit, setEdit] = useState(false);
const [editField, setEditField] = useState(null);
// Lightbox
const [imgLocation, setImgLocation] = useState(null);
const [imgToShow, setImgToShow] = useState('');
const [showLightBox, setShowLightBox] = useState(false);
const selectEdit = (field) => {
setEditField(field);
setEdit(true);
};
useEffect(() => {
const fetchData = async () => {
const result = await getShop(match.params.id);
let shopObject = result.data;
const user = await getCurrentUser();
setCurrentUser(user.data);
const products = await getShopProducts(result.data._id);
shopObject.products = products.data;
//Set Dashboard view if user is owner
if (shopObject.user === user.data._id) {
setDashboard(true);
}
setShop(shopObject);
};
fetchData();
}, []);
return (
<Fragment>
{/** Show Lightbox */}
{console.log('img selected Parent: ' + imgToShow)}
{console.log('Toggle Parent: ' + setShowLightBox)}
{showLightBox && imgToShow && <LightBox img={imgToShow} toggle={setShowLightBox} />}
{/** Navbar */}
<Navbar view={'shop-owner'} history={history} user={currentUser} />
{shop === null ? (
<PrimeSpinner />
) : (
<Fragment>
{shop === null ? (
<PrimeSpinner />
) : (
<section className="container">
{/** Edit Shop */}
{edit === true && (
<ItemEdition
field={editField}
item={shop}
itemType={'shop'}
setAlert={setAlert}
toggle={setEdit}
/>
)}
{/** Product Creation */}
{productCreation === true && (
<ItemCreation
toggle={setProductCreation}
itemType={'product'}
setAlert={setAlert}
shop_id={shop._id}
/>
)}
{/** Section Creation */}
{sectionCreation === true && (
<SectionCreation
toggle={setSectionCreation}
setAlert={setAlert}
shop={shop}
setImg={setImgToShow}
showImg={setShowLightBox}
/>
)}
<div className="dashboard">
{/** Top */}
<div className="top-section bg-white">
<div className="jumbo-container">
<JumboHeader view={'shop-owner'} item={shop} />
<img
className="jumbo-showcase"
src={require('../../../../public/uploads/' + shop.pic_jumbo)}
></img>
<div className="inner">
<div className="logo-showcase">
<img src={require('../../../../public/uploads/' + shop.pic_logo)}></img>
{dashboard && (
<i
onClick={() => selectEdit('Pic_Logo')}
className="far fa-edit"
></i>
)}
</div>
<div className="text-container">
<h1>{shop.name}</h1>
{dashboard && (
<i onClick={() => selectEdit('Name')} className="far fa-edit"></i>
)}
</div>
<div className="text-container">
<p>
{shop.intro
? shop.intro
: 'Small shop description/slogan, products for sale or services to provide'}
{dashboard && (
<i
onClick={() => selectEdit('Intro')}
className="far fa-edit"
></i>
)}
</p>
</div>
</div>
{dashboard === true && (
<div className="edit-button">
{dashboard && (
<i
onClick={() => selectEdit('Pic_Jumbo')}
className="far fa-edit"
></i>
)}
</div>
)}
<JumboFooter />
</div>
</div>
{!dashboard && (
<Fragment>
{/**shop.products && (
<CardCarousel items={shop.products} type="products" />
)*/}
<InfoSection
message={'Message about the website, the products or any importan info'}
type={'w/img'}
reverse={false}
title={'Title'}
/>
<h1 className="page-title"> Products </h1>
<DataViewComp items={shop.products} type="products" />
</Fragment>
)}
<Fragment>
{/** Accordion */}
<Accordion>
<AccordionTab header="Website Content">
<button
onClick={() => setSectionCreation(true)}
className="btn btn-primary"
>
Add Section
</button>
{/**
<InfoSection
dashboard={dashboard}
items={shop.products}
itemsType={'products'}
type={'carousel'}
/>
*/}
<InfoSection
dashboard={dashboard}
message={'Message about the website, the products or any importan info'}
type={'w/img'}
reverse={false}
/>
<h1 className="page-title"> Products </h1>
<InfoSection
dashboard={dashboard}
items={shop.products}
itemsType={'products'}
type={'data-view'}
/>
</AccordionTab>
<AccordionTab header="Statistics">
<div>
<TabView
activeIndex={activeIndex}
onTabChange={(e) => setActiveIndex(e.index)}
>
<TabPanel header="Shop Data" leftIcon="fas fa-shopping-cart">
<ChartComp products={shop.products} />
</TabPanel>
<TabPanel header="Product Data" leftIcon="fas fa-shopping-basket">
<ChartComp products={shop.products} />
</TabPanel>
<TabPanel header="Disabled" disabled={true}></TabPanel>
</TabView>
</div>
</AccordionTab>
<AccordionTab header="Products">
{/**Product List */}
<button
onClick={() => setProductCreation(true)}
className="btn btn-primary mb-1"
>
<i className="fas fa-plus-circle mr-1"></i>Product
</button>
<DataViewComp items={shop.products} type="products" />
</AccordionTab>
<AccordionTab header="Feedback">
{/**Review List */}
<div className="accord-list">
{/**Review card */}
<TextArea value={reviewText} setValue={setReviewText} />
<DataViewComp items={shop.feedback} type="feedback" />
</div>
</AccordionTab>
<AccordionTab header="Privacy">
<div className="big-items">
<div className="big-item">
<div className="bold">Receive email notifications:</div>
<InputSwitch
checked={checked1}
onChange={(e) => setChecked1(e.value)}
/>
</div>
</div>
</AccordionTab>
<AccordionTab header="Settings">
<div className="big-items">
<div className="big-item">
<div className="bold">Do something:</div>
<InputSwitch
checked={checked1}
onChange={(e) => setChecked1(e.value)}
/>
</div>
<div className="big-item mt-1">
<div className="bold">Delete Account:</div>
<button className="btn btn-danger">Delete</button>
</div>
</div>
</AccordionTab>
</Accordion>
{/** Accordion */}
<Accordion>
<AccordionTab header="Feedback">
{/**Review List */}
<div className="accord-list">
{/**Review card */}
<TextArea value={reviewText} setValue={setReviewText} />
<DataViewComp items={shop.feedback} type="feedback" />
</div>
</AccordionTab>
</Accordion>
</Fragment>
}
</div>
</section>
)}
</Fragment>
)}
</Fragment>
);
};
ShopDashboard.propTypes = {
history: PropTypes.object.isRequired,
setAlert: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => ({
history: state.history,
});
export default connect(mapStateToProps, { setAlert })(withRouter(ShopDashboard));