Передать динамический заголовок общей функции HOC в reactjs

Question

У меня есть один общий компонент для успеха - рендеринг этого компонента с помощью навигации по маршрутам.

SuccessComponent.jsx

var pageTitle;
const SuccessComponent = (props) => {
  pageTitle = props.location.state.title;
  return(
    <> jsx code here </> 
  )
}

//This title needs to be dynamic, not getting props here hence took var pageTitle but getting undefined.
let SuccessComp = withTitle({component: SuccessComponent, title: pageTitle})
export default SuccessComp;

Компонент WithTitle устанавливает заголовок через библиотеку response-шлема и обновляет его на каждом экране. Мне нужно изменить заголовок при разных вызовах SuccessComponent. Как я могу этого добиться?

Я использую SuccessComponent, как показано ниже.

MyComponent.jsx

export default MyComponent = () => {
  const onSubmit = () => {
    props.history.push({pathname:'/success',state:{title: 'my comp'})
  }
  return(
    <> jsx code here </>
  )
}

MyComponent1.jsx

export default MyComponent1 = () => {
  const onSubmit = () => {
    props.history.push({pathname:'/success',state:{title: 'my comp 1'})
  }
  return(
    <> jsx code here </>
  )
}

withTitle.jsx

export default function withTitle({component: Component, title}){
 return function title(props){
  (
   <>
     <Helmet>
        <title>{title}</title>
     </Helmet>
     <Component {...props} />
   </>
   )
  }
}

Answer 1

withTitle.jsx

export default function withTitle({component: Component, title}){
const [titleState, setTitleState] = useState();

 return function title(props){
  (
   <>
     <Helmet>
        <title>{title}</title>
     </Helmet>
     <Component {...props} setTitle={setTitleState}/>
   </>
   )
  }
}

Добавлен один вызов метода и вызван из компонента успеха, как показано ниже.

SuccessComponent

const SuccessComponent = (props) => {
  props.setTitle(props.location.state.pageTitle);
  return(
    <> jsx code here </> 
  )
}

//This title needs to be dynamic, not getting props here hence took var pageTitle but getting undefined.
let SuccessComp = withTitle({component: SuccessComponent })
export default SuccessComp;

Answer 2

Вы отправляете состояние через реактивный маршрутизатор, но пытаетесь получить доступ к локальным реквизитам. Вам нужно получить доступ к заголовку вthis.props.location.state.title

Если вы посмотрите на этот ответ, это поможет вам прийти к правильному заключению. Как передать параметры с помощью history.push/Link/Redirect в react-router v4?