Неглубокий рендеринг функционального компонента без состояния - реакция

Question

У меня есть функциональный компонент в React, определяемый следующим образом

const MyComponent = ({
   prop1,
   prop2,
   prop3
}, param1 , param2) => {
   return [
//list of spans
      ]
   }

В файле спецификации я использовал мелкое отображение для визуализации компонента

const fakeObj = {
    prop1:value,
    prop2:value,
    prop3:value
}

shallow(<MyComponent {...fakeObj} param1={something} param2={something} />)

Однако, когда я console.logпараметры в MyComponent, я получаю {} и undefined для param1 и param2 соответственно, в то время как fakeObj получен нормально. Есть ли способ, где мы можем отрисовать компонент, передавая объект как один из параметров?

Когда я просто вызываю компонент из файла спецификации как функцию, например

MyComponent({fakObj},param1,param2) 

, я получаю правильные значения для параметров, но не могу правильно найти элементы span, используя фермент.

Answer 1

Реагирует на функциональный компонент, возможно, функция (функция для создания компонента) принимает только один параметр для получения своего реквизита.Таким образом, вы не можете определить функциональный компонент способом ( определить несколько параметров ), что вы сделали.Вы должны определить это следующим образом.

let MyComponent = (props) => {

    // props is an object, it contains all props passed by component call.
    // So you can get property value as props.propName


    return 'something' // what you like to return. 
}

Если вы используете компонент, как показано ниже

<MyComponent prop1="Propone 1 Value" prop2="Prop 2 Value" prop3="Prop 3 Value" /> 

И подпорки консоли внутри вашего компонента, такие как

let MyComponent = (props) => {
    console.log(props);
    return 'something' // what you like to return. 
}

Вы получите все переданные свойства как функциюАргумент ( в качестве параметра реквизита ) в качестве объекта, как показано ниже.

{
 prop1:"Propone 1 Value",
 prop2:"Propone 2 Value",
 prop3:"Propone 3 Value"
}

Теперь перейдите к вашему требованию. Вы можете создать свой компонент следующим образом

let Home = (props) => {

    let {fakeObj, param1, param2} = props;

    return [
        //list of spans
    ]
}

И вызвать компонент, как этот

const fakeObj = {
    prop1:value,
    prop2:value,
    prop3:value
}

shallow(<MyComponent fakeObj = {fakeObj} param1={something} param2={something} />)