Как запустить функцию родительского компонента (`App.js`) с именем fakeAuth.authenticate из дочернего компонента (` LoginApp`)? - PullRequest
Новая
       28

Как запустить функцию родительского компонента (`App.js`) с именем fakeAuth.authenticate из дочернего компонента (` LoginApp`)?

0 голосов
/ 04 февраля 2019

Я хочу вызвать родительский компонент App.js Функция fakeAuth.authenticate из дочернего компонента LoginApp.js.

Нужно ли устанавливать состояние родительского элемента для перенаправления PrivateRoute дочернего объекта?

Большая часть моей аутентификации происходит на стороне сервера.Я просто использую маршрутизатор React для защиты моей защищенной страницы.

Буду признателен, если вы покажете мне путь здесь.

Ниже приведен код: 

// Parent Componenet

const fakeAuth = {
isAuthenticated: false,
 authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100) // fake async
}
 }

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
  fakeAuth.isAuthenticated === true
  ?<Component {...props}/>
  :<Redirect to='/'/>
  )} />
)


 class App extends Component {
  render() {
   return (
     <Router>
       <div>
      <Route exact path="/" component={LoginApp} />
      <PrivateRoute exact path="/home" component={Home} />
    </div>
  </Router>
   );
 }
 }

export default App;



// Child Component

const LoginApp = (props) => {

 const loginWasClickedCallback = (data) => {
console.log(data);
// alert('Login callback, see log on the console to see the data.');

axios.post('/api/account/signin', data)
  .then(function (res) {
    console.log(res);
    if (res.data.success) {

      // !!! WANT TO CALL PARENT'S AUTHENTICATE FUNCTION HERE !!!

    } else {
      props.history.push('/');
      alert(res.data.message);
    }
  })
  .catch(function (err) {
    // console.log(err);
  });
 };

  return (
     <div className="loginWrapper">
  <ReactSignupLoginComponent
    title="Welcome to KidKlub!"
    handleSignup={signupWasClickedCallback}
    handleLogin={loginWasClickedCallback}
  />
     </div>
  );

 };

  export default withRouter(LoginApp);

1 Ответ

0 голосов
/ 04 февраля 2019

Вы можете использовать следующее: 

// in parent
<Route exact path="/" component={() => <LoginApp authenticate={fakeAuth.authenticate} />} />
// in child component run function
props.authenticate(args);
...