在react js中使用新组件

我已经在我的react应用程序上创建了一个注销按钮组件。

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';

 export class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.context.store.dispatch();
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
}

我只想在index.js中使用这个组件,这样当用户单击注销按钮时,他将被引导到www.google.com。

2. 如何在index.js中使用组件?

这是我的index.js:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { LogOutButton } from './components/LogOutButton.js';

class Home extends React.Component {
  displayName = Home.name;

  state = {
    result: 0,
    val1: 0,
    val2: 0,
  };

  handleChangeOne = event => {
    this.setState({ val1: event.target.value });
  };

  handleChangeTwo = event => {
    this.setState({ val2: event.target.value });
  };

  add = () => {
    this.setState({ 
      result: parseInt(this.state.val1) + parseInt(this.state.val2)
    });
  };

  render() {
    return (
      <div>
        <h1>Hello world! The result is: {this.state.result}</h1>
        <input type="text" onChange={this.handleChangeOne} />
        +
        <input type="text" onChange={this.handleChangeTwo} />
        = <br />
        <button onClick={this.add}>Add</button>
        <br/><br/> 
        <button onClick={LogOutButton}>Log Out</button> 
      </div>
    );
  }
}

我知道在render()中写这一行是错误的

<button onClick={LogOutButton}>Log Out</button>

但是我不知道如何使LogOutButton组件工作。