Question

我可以访问无状态组件中的函数吗？我知道，如果更改类组件，则该函数可以访问。但是，据我所知。钩子不能与类组件兼容。请觉得收费。谢谢。

# This example is incorrect, for describe the idea only.
const StatelessComponent = () => {

  const StatelessComponentFunction = () => {
    return 1;
  }

}

const thisFun = new TestComponent();

let A = thisFun.StatelessComponentFunction();

已于2019年10月16日更新，找到了解决方案。

基于这些页面“ https://hackernoon.com/javascript-state-encapsulation-without-classes-in-2019-97e06c6a9643”和“ https://basarat.gitbooks.io/typescript/docs/javascript/closure.html”上的信息。我找到了解决方法。

已修改

const StatelessComponent = () => {

  return {
    StatelessComponentFunction() {
      return 1;
    }
  }

}

const thisFun = StatelessComponent();

console.log(thisFun.StatelessComponentFunction());

Answer 1

否，无状态组件用于将jsx呈现到DOM。

您显示的内容实际上并不是React组件，因为它没有返回jsx。这只是一个JS函数。

// This example is incorrect, for describe the idea only.
const TestComponent = () => {

  const StatelessComponentFunction = () => {
    return 1;
  }

}

const thisFun = new TestComponent();

let A = thisFun.StatelessComponentFunction();

无状态组件应像反应组件<TestComponent />

一样实例化

Answer 2

正如@Joey_Gough所说。无论组件是有状态组件还是无状态组件，您的组件都应返回JSX。

如果要在无状态组件中执行方法，则应在父项Class Component内创建一个函数，并将该函数作为子组件的prop传递。像这样：

class ParentComponent extends Component {

  handleClick = () => {
    // Code here
  }

  render() {

    return(
            <StatelessComponent onClicked={handleClick} />
    )
  }
}

const StatelessComponent = (prop) => {

  return(
    <button onClick={prop.onClicked></button> 
  )
}

如何访问无状态组件中的功能？

2 个答案: