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函数定义为箭头1，因此我们不需要绑定它。其次，我将此功能作为道具传递给组件。第三，我在这里使用了此功能：

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

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

只需多过the official documentation。您对状态，道具以及如何将它们传递到组件感到困惑。

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>

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

1 个答案: