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

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

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

Функция signOut определяется и передается компоненту Header без сохранения состояния его родителем App следующим образом; 

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    this.setState({
      auth: null,
    });
  }

  render() {
    return (
      <div>
        <Header signOut={this.signOut} />
      </div>
    );
  }
}

Header Имеет несколько функций, определенных вне его, и я хотел бы в дальнейшем передать signOut этим функциям, в идеале, как я продемонстрировал ниже, но сейчас это неправильно. 

//one of several functions defined to be used inside header
function nav() {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <Link className="link" to="/login">
        Login
      </Link>
      <Link className="link" to="/admin">
        Admin
      </Link>
      //signOut used here. 
      <div className="link" onClick={this.props.signOut}>
        Logout
      </div>
    </div>
  );
}

const Header = (props) => (
  <div className="headerWrapper">
    {nav()}
  </div>
);

export default Header;

Как правильно передать sighOut этим функциям из Header? Это вообще вещь? Спасибо!

Ответы [ 4 ]

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

Поскольку вы не объявили Заголовок как класс, подпрограммы не должны вызываться с ключевым словом {this}. также передайте реквизиты из {Header} в {nav} (если он находится вне Header ...) 

const Header = (props) => (
    <div className="headerWrapper">
      {nav(props)}
    </div>
    );
export default Header;


function nav(props) {
 return localStorage.getItem("token") ? (
  <p>hii</p>
   ) : (
  <div className="linkWrapper">
    <Link className="link" to="/login">
      Login
    </Link>
    <Link className="link" to="/admin">
      Admin
    </Link>
    //signOut used here. 
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  </div>
);

}

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

Дайте nav() аргумент выхода: 

function link({to, signOut, text}) {
  <Link className="link" to={{
    pathname: to,
    state: {
      signOut
    }
  }}>
  </Link
}
function nav({ signOut }) {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <link to="/admin" signOut={signOut} text={"Admin"} />
      <link to="/login" signOut={signOut} text={"Login"} />
      <div className="link" onClick={signOut}>
        Logout
      </div>
    </div>
  );
}
const Header = (props) => (
  <div className="headerWrapper">
    <nav signOut={props.signOut} />
  </div>
);
0 голосов
/ 15 апреля 2020

Если вы хотите передать переменную (которая может быть функцией), вам нужно передать ее как реквизит дочернему компоненту.

Обратите внимание, что имя определяется по имени передачи родительского компонента: 

function Nav(props) {
  return (
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  );
}


function Header(props) {
 return (
   <Nav
     signOut={props.headerSignOut}
   />
 );
}


function App() {
  function originalSignOutFunction() {
    console.log('Signed out');
  }

  return (
    <Header
      headerSignOut={originalSignOutFunction}
    />
  );
}
0 голосов
/ 15 апреля 2020

Вы не хотите вызывать функцию , которую хотите визуализировать функциональный компонент и передавать ему свойства: 

function Nav(props) {
  // use props.signOut
  return ...
}

const Header = (props) => (
  <div className="headerWrapper">
    <Nav signOut={props.signOut}/>
  </div>
);
...