Реагируйте на пропуска, когда дочерний компонент является переменной - PullRequest
Новая
       16

Реагируйте на пропуска, когда дочерний компонент является переменной

1 голос
/ 23 апреля 2020

Как я могу передать реквизиты дочернему компоненту, когда компонент является переменной. В следующем коде мне нужно передать функцию prev в качестве опоры шагу. Спасибо. 

import React, {useState} from 'react';

const Wizard = (props)=>{
    const [step] = useState(0);
    const CurrStep = props.steps[step];

    const prev = ()=>{
        console.log('prev called')
    }

    return (
        <div>   
            {// need to pass prev as a prop to the CurrStep component}
            {CurrStep }
        </div>)
}

export default Wizard

Wizard.propTypes = {
  header: PropTypes.func.isRequired,
  steps: PropTypes.array.isRequired,//array of functional components 
  wizardContext: PropTypes.object.isRequired,
  onComplete: PropTypes.func.isRequired
};

Ответы [ 3 ]

0 голосов
/ 23 апреля 2020

вы можете распространить props внутри CurrStep компонента, как это 

return <CurrStep {...props} />;

вот codesandbox демонстрация кода ниже 


import React, { useState } from "react";

const Wizard = props => {
  const [step] = useState(0);

  const Comp1 = props => <div>{props.a}</div>;
  const Comp2 = props => <div>{props.a}</div>;
  const comps = [Comp1, Comp2];
  const CurrStep = comps[step];

  // this is just for demo, you can just pass props straight from Wizard
  props = { a: "a", ...props };
  return <CurrStep {...props} />;
};

export default Wizard;
0 голосов
/ 23 апреля 2020

Это была моя ошибка, я передавал такой массив:

[,] вместо

[Step1, Step2]

Извините, что трачу ваше время .

0 голосов
/ 23 апреля 2020 
// adding (props) =>
const CurrStep = (...props) => props.steps[step](...props);

const prev = () => {
    console.log('prev called')
}

return (
    <div>
       {CurrStep(prev)}
    </div>
)
...