Отправка компонентов через react-redux

Я хочу передать компонент и отобразить его внутри другого через редукцию. Я делаю что-то вроде этого:

Компоненттодиспатч.js

const ComponentToDispatch = (props) => {
    return (<div>Propagate me {props.anthem}</div> {/* props.anthem = undefined, unlike what I expect.*/}
);
};
export {ComponentToDispatch};

В следующем компоненте у меня есть кнопка, которая отправляет ранее определенную.

BruitEvent.js

 // code above
`import {ComponentToDispatch} from "./ComponentToDispatch";
 import {showComponentAction} from "./actions";
 const BruitEvent =()=>{
    const dispatch = useDispatch();
    return (<button onClick={(evt)=>dispatch(showComponentAction(ComponentToDispatch)}>
 Click to dispatch</button>);
 };`

Действие, которое запускает это событие: action.js

 `
 export function ShowComponentAction(Component) {

 return {
    type: SHOW_ACTION,
    payload: {
      component: <Component />,
  },
 };
}`

Наконец, я могу отобразить распространяемый компонент:

const DispayComponent = () =>{
const { component} = useSelector((state) => {
if (state.testDisplay) {
  return {
    component: state.testDisplay.component,
  };
}
   return { component: null };
 });

useInjectReducer({ key: "testDisplay", reducer });

   return (<div>{component}</div>);
 }
 export {DisplayComponent};

Пока все хорошо, спасибо Дэвиду Хеллсингу за его понимание, я могу отобразить каждую статическую вещь, находящуюся в `ComponentToDispatch', но он не может обрабатывать реквизит.

Вопрос: Как я могу передавать реквизиты при отправке самого компонента?


reactjs redux react-redux react-boilerplate
person Davood Falahati    schedule 13.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно либо создать экземпляр и заключить реквизиты до, когда компонент будет отправлен, либо передать неэкземплярный компонент и объект реквизитов в отправленном действии и передать реквизиты компоненту на приемный конец. Я предлагаю последнее, отправьте и компонент, и реквизит в действии.

const BruitEvent =()=>{
  const dispatch = useDispatch();
  return (
    <button
      onClick={(evt) => dispatch(
        showComponentAction(ComponentToDispatch, /* some possible props object */)
      )}
    >
      Click to dispatch
    </button>
  );
};

...

export function ShowComponentAction(Component, props = {}) {
  return {
    type: SHOW_ACTION,
    payload: { Component, props }, // <-- assumes reducer places in state.testDisplay
  },
};

...

const DispayComponent = () =>{
  const { Component, prop } = useSelector((state) => state.testDisplay);

  useInjectReducer({ key: "testDisplay", reducer });

  return Component ? <div><Component {...props} /></div> : null;
}
person Drew Reese    schedule 13.10.2020
comment
Я решил создать экземпляр компонентов перед отправкой, но это был не тот метод, который я искал. Ваше второе предложение - то, что мне нужно. - person Davood Falahati; 14.10.2020