Как передать функцию дочернему компоненту в качестве реквизита?

Question

Я хочу передать функцию isLoggedIn дочернему компоненту HandleArticle в качестве реквизита.Даже если я использую функцию стрелки из-за проблемы this, возникает TypeError: this.isLoggedIn is not a function.

class HandleNews extends React.Component {
  isLoggedIn = () => {
    if (!this.props.isSignedIn) {
      history.push("/");
    } else {
      return <div>hello</div>;
    }
  };

  render() {
    return (
      <div>
        <Link to="/news/article">
          <HandleArticle isLoggedIn={this.isLoggedIn} />
        </Link>
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log(state);
  return {
    isSignedIn: state.auth.isSignedIn
  };
};

export default connect(mapStateToProps)(HandleNews);

Answer 1

Согласно документации , синтаксис стрелки все еще находится на стадии предложения для передачи функций.

isLoggedIn = () => {
    if (!this.props.isSignedIn) {
      history.push("/");
    } else {
      return <div>hello</div>;
    }
  };

Использование bind синтаксиса в конструкторе для функции isLoggedIn

this.isLoggedIn = this.isLoggedIn .bind(this);

Bind непосредственно в рендеринг функция

<HandleArticle isLoggedIn={this.isLoggedIn.bind(this)} />