Question

我有一个需要从文件中导出的功能，但与此同时，我需要利用反应状态在更新后重新呈现。

从类内部导出函数似乎不太可能，那么如何从类外部的函数中更新状态？

import React, {Component} from 'react';

export function functionName(){
const filter = some filter;
  this.setState({
    filter: newFilter
  })
}

class ClassName extends Component{
  constructor(){
    super();
    this.state = {
      filter: {}
    }
  }
  render(){
    <>
    </>
  }
}

Answer 1

您可以将functionName导出到外部，但无法在该函数内部访问this.setState。

因此，您可能希望使其成为pure，并返回新状态。请参阅Dan Abramov的技巧-https://twitter.com/dan_abramov/status/824308413559668744?lang=en

因此，通过遵循Dan的技巧使functionName可重用，让我们做些有趣的事情。

您可以按照下面的演示进行操作。

在下面的代码中，increment和decrement与您帖子中的functionName相匹配。用于更新状态（但实际上会返回新状态）的函数。

Counter与您的ClassName匹配，您想在其中重新使用导出的功能。

重用导出函数的方法是在this.setState（请参阅Counter）内调用handleIncrement/handleDecrement。

import React, { Component } from "react";

// https://twitter.com/dan_abramov/status/824308413559668744/photo/1
export const increment = (state, props) => ({
  value: state.value + 1
});
export const decrement = (state, props) => ({
  value: state.value - 1
});

class Counter extends Component {
  state = { value: 0 };

  handleIncrement = () => this.setState(increment);
  handleDecrement = () => this.setState(decrement);

  render() {
    const { value } = this.state;

    return (
      <>
        <h1>Counter.jsx: {value}</h1>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </>
    );
  }
}

export default Counter;

现在Counter，increment和decrement已导出，可以导入其他地方。

import React, { useState } from "react";
import Counter, { increment, decrement } from "./Counter";

function App() {
  const [count, setCount] = useState({ value: 0 });

  //                      ... Being reused! ?
  const handleIncrement = () => setCount(increment);
  const handleDecrement = () => setCount(decrement);

  return (
    <div className="App">
      <section>
        <h1>App: {count.value}</h1>
        <button onClick={handleIncrement}>+</button>
        <button onClick={handleDecrement}>-</button>
      </section>

      <section>
       {/* ? We can use the counter as it is */}
        <Counter />
      </section>
    </div>
  );
}

您可以将其导入另一个文件，并使用Counter照原样使用，或者也可以在功能组件中重复使用increment/decrement。

这意味着，您可以在“类”和“功能组件”中使用相同的逻辑！ ?

Answer 2

您可以在组件内部添加功能，并使用以下语法：

    export default ClassName;

或者，如果要导出功能，可以通过-

   export const functionName = () => (
        // Some other JSX
   );

react组件内部的导出功能或组件外部相同文件中的访问状态

2 个答案: