Question

如果我们想制作一个功能性的无状态组件，但是我们想要能够访问道具的方法，我们该怎么做呢？像这样的事情是否有一般规则或最佳实践

例如

function Stateless(props) {
   function doSomething(props) {
      console.log(props);
   }
  doSomething() // logs 'undefined'
return (
  <div> some stuff </div>
}

至少从我的经验来看，内部道具始终不是给定的道具。

如果我不需要状态（使用Redux），但仍然想要访问props的方法，那么使用类而不是无状态函数是否仍然是一种好习惯？

Answer 1

function Stateless(props) {
   function doSomething() { // 1. props is accessible inside the function so you can skip the parameter
      console.log(props);
   }
  doSomething();
return (
  <div> some stuff </div>
)//2. missing paranthesis
}

Answer 2

在功能组件内部使用功能完全可以。实际上，最近在React 16.8中引入的React hooks都是通过special hooks将状态和生命周期事件带到功能组件来使功能组件更加方便。

但是正如其他人提到的那样，您需要将适当的参数传递给函数：doSomething(props)或根本不传递参数，因此永远不要在函数声明本身：function doSomething()中期望它们。

Answer 3

doSomething（）记录未定义，因为调用doSomething（missing props）时未传递内部props变量。您可以删除内部道具：

function Stateless(props) {
   function doSomething() {
      console.log(props);
   }
  doSomething()
return (
  <div> some stuff </div>
}

或在组件外部声明doSomething：

function doSomething(props) {
  console.log(props);
}
function Stateless(props) {
  doSomething(props)
return (
  <div> some stuff </div>
}

两个都可以。第一个可能更容易，但是如果您经常重绘组件，第二个性能更高，因为您只声明一次doSomething。

用方法反应功能组件

3 个答案: