传递给子组件的道具问题

Question

在我的应用程序中，我很难将道具传递给一个子组件。

当我导航到任何有<PageTemplate />的主题链接时，我会得到一个空白页面，控制台中有一个错误，上面写着: subject是不可迭代的。subjects是从另一个文件导入的字符串数组，您可以从下面的代码中看到：

以下是代码：

根成分

import React from "react";

import Signup from './theQuestionsSteps/signup';
import Home from './home';
import ErrorPage from './pageNotFound';
import {
    Mathematics,
    English,
    Physics,
} from './subjects/subjects';

const RouterComponent = () => {

    return (
         <HashRouter>
             <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/signup" component={Signup} />
                <Route path="/maths" component={Mathematics}></Route>
                <Route path="/english" component={English}></Route>
                <Route path="/physics" component={Physics}></Route>
             </switch>
         </HashRouter>
)

export default RouterComponent;

这是我导航到主题组件的页面标题组件。导航到没有<PageTemplate />呈现的组件。但是数学抛出了我前面提到的错误。

import {NavLink} from 'react-router-dom';

const HeaderOfCategory = ({subjects}) => {

    const [s1, s2, s3, s4] = subjects;
    const routesVariabele = subjects.map((item) => {
        
        return "/" + item.replace(/\s/, '');
    });

    const [r1, r2, r3, r4] = routesVariabele;
    const styles = { 
        backgroundColor: "green",
        color: "white"
    }

    return (
       <div className="flex flex-row gap-3 w-3/4 mx-auto justify-center">
            <NavLink to={{pathname: r1, subjects}} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s1}</NavLink>
            <NavLink to={r2} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s2}</NavLink>
            <NavLink to={r3} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s3}</NavLink>
            <NavLink to={r4} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s4}</NavLink>
 </div>

模板组件

import HeaderOfCategory from './headerOfCategory';


const PageTemplate = ({children, subjects}) => 
<div>
    <HeaderOfCategory subjects={subjects} />
    {children}
</div>


export default PageTemplate;

学科构成

import PageTemplate from '../pageTemplate';



export const Mathematics = ({subjects}) => {

     return (
         <PageTemplate subjects={subjects}><div>I am maths</div></PageTemplate>
     )
}

export const English = () => {

     return (
         <div>I am english</div>
     )
}

export const Physics = () => {

     return (
         <div>I am physics</div>
     )
}

用户选择自己选择的主题的主页。这样就没问题了。

import React, {useState} from 'react';
import {NavLink} from 'react-router-dom';
import {subjects} from './subjectsList';



const Home = () => {

    const [countSelection, setCountSelection] = useState({four : 0, count : ''});
    const [theInput, setTheInput] = useState([]);

    const handleClick = (e) => {
            setCountSelection({...countSelection, four : countSelection.four + 1});
            if(countSelection.four >= 3){
                setCountSelection({...countSelection, count: 'disabled'});
            }
    }

    const handleChange = (e) => {

        setTheInput([...theInput, e.target.value]);
                    
    }


    return (
        <div className="p-10 w-3/4 mx-auto">
            <div className="p-3 mx-auto">
                <h1 className="text-xl text-gray-500 mx-auto text-center">Select your combination of subjects to begin your exercise</h1>
            </div>
            
    <div  className="flex flex-col w-3/4 mt-8 p-10 mx-auto justify-center shadow-sm shadow-gray-600">
            <p className="mb-5">Note: You can only select Four (4) subjects of your choice</p>
            {subjects.map((item, index) => (
                <div key={index}>
                    <input 
                    type="checkbox" 
                    id={`subject${index}`} value={item} 
                    onChange={handleChange}
                    onClick={handleClick}
                    disabled={countSelection.count}
                    />
                    <label htmlFor="" className="m-5 text-gray-600 capitalize">{item}</label>
                    
                </div>
            
                ))
            }

            {countSelection.count === "disabled" ?<NavLink to={{pathname : "/startPage", theInput}} className="mt-10 w-2/4 p-3 bg-green-500 rounded-lg text-white hover:bg-blue-500 cursor-pointer">Submit</NavLink> : ''}
        </div>

        </div>
    )
}


export default Home;

Answer 1

好吧，我想我现在明白了。您正在尝试通过subjects (即路由状态)将Mathematics组件传递给NavLink组件。

<NavLink
  to={{
    pathname: r1,
    subjects, // <-- not a valid to object property
  }}
  activeStyle={styles}
  className="...."
>
  {s1}
</NavLink>

致:对象

可以具有下列任何属性之一的对象：

• 路径名:表示要链接到的路径的字符串。
• search:查询参数的字符串表示形式。
• 散列:要放在URL中的散列，例如#a-散列。
• 状态:将状态持久化到该位置。

这里的问题是链接不关心任何subjects属性。它应该在state属性上传递。

<NavLink
  to={{
    pathname: r1,
    state: { subjects }, // <-- pass in state
  }}
  activeStyle={styles}
  className="...."
>
  {s1}
</NavLink>

因为Mathematics是由Route直接在component支柱上呈现的，所以它被传递给线路道具，即history、location和match。正是在location对象中，Mathematics可以访问传递的路由状态。

<Route path="/maths" component={Mathematics} />

..。

export const Mathematics = ({ location }) => {
  const { state } = location;
  const { subjects } = state || {}; // provide fallback object to destructure from!

  return (
    <PageTemplate subjects={subjects}>
      <div>I am maths</div>
    </PageTemplate>
  )
}

您可能还希望在subjects中提供一个默认的PageTemplate支柱值，这样如果PageTemplate没有传递，或者没有定义subjects至少是一个空的可迭代数组。

const PageTemplate = ({ children, subjects = [] }) => (
  <div>
    <HeaderOfCategory subjects={subjects} />
    {children}
  </div>
);