reactjs - 反应组件内的导出功能或组件外同一文件中的访问状态

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(){
    <>
    </>
  }
}

标签： reactjs

Answer 1

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

所以你可能想要成功pure，返回一个新的状态。请参阅 Dan Abramov 的此提示 - https://twitter.com/dan_abramov/status/824308413559668744?lang=en

functionName因此，让我们按照 Dan 的提示让它可重用，从而做一些有趣的事情。

---

您可以跟随下面的工作演示。

---

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

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

重用导出函数的方法是调用this.setStateinside 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在函数组件中重复使用。

这意味着，您可以在类和函数组件中使用相同的逻辑！