javascript - 如何在React中传递另一个文件中的函数

Question

我有一个用于更改 react 组件状态的函数，但我试图在另一个文件中传递该函数。我收到错误消息，指出我尝试传递的函数 (changeView) 未定义。

这是 App.js

export default class App extends Component {
constructor() {
    super();

    this.state = {
        language: "english",
        render: ''
    }
}

changeView(view, e){
    console.log(view);
    this.setState({render: view});
}

_renderSubComp(){
    switch(this.state.render){
        case 'overview': return <Overview />
        case 'reviews': return <Reviews />
    }
}

render() {
    const {render} = this.state
    return <Fragment>
        <Header language={this.state.language} />
        <Hero />
        <Navigation render={render}/>
        {this._renderSubComp()}
    </Fragment>;
}

}

我正在尝试将changeView方法传递给Navigation.JS组件，这样我就可以更改事件链接并渲染上面的_renderSubComp方法中列出的组件。

 import React from "react";
 import "./navigation.css";
 import { changeView } from "../app";

 export default function Navigation() {
    return <div className="navigation">
        <a onClick={this.changeView.bind(this, 
'overview')}>Overview</a>
    <a>Reviews</a>
</div>;
}

我应该如何将该函数传递到另一个文件，以便它能够更改我的组件的状态并呈现我需要的组件。

Answer 1

你不能导入这样的方法。您将像任何其他 Prop 一样将您的函数传递给您的组件并在其中使用。

我改变了一些事情。首先，我将 changeView 函数定义为箭头函数，因此我们不需要绑定(bind)它。其次，我将此函数作为 prop 传递给组件。第三，我在那里使用了这个函数，例如:

onClick={() => props.changeView('overview')}

如您所见，它是 props.changeView 而不是 state.changeView

只需浏览the official documentation多一点。您对状态、 Prop 以及如何将它们传递给组件感到困惑。

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      language: "english",
      render: ''
    }
  }

  changeView = (view, e) => {
    console.log(view);
    this.setState({ render: view });
  }


  render() {
    const { render } = this.state
    return <div>
      <Navigation render={render} changeView={this.changeView} />
    </div>;
  }
}

const Navigation = (props) => {
  return <div className="navigation">
    <a onClick={() => props.changeView('overview')}>Overview</a>
    <a>Reviews</a>
  </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>