在 React 中的函数组件之外声明函数

【问题标题】：Declare Function Outside of a Functional Component in React在 React 中的函数组件之外声明函数
【发布时间】：2020-10-22 01:34:50
【问题描述】：

看看下面的功能组件：

const MyComponent = (props) => {
  function addPropData() {
   return prop.data.name
  }

  return (
  <div>{addPropData()}</div>
 )
}

我想知道是否可以在MyComponent 的outside 声明addPropData 函数。例如，像这样：

const MyComponent = (props) => {
  return (
  <div>{addPropData()}</div>
 )
}

function addPropData() {
 return prop.data.name
}

我知道这不起作用——我想知道是否有办法让它起作用？如果有，怎么做？

谢谢。

【问题讨论】：

您可以将props 作为参数传递给您的函数addPropData(props)，并接受props 作为您的函数的参数function addPropData(props)。

标签： reactjs react-component react-functional-component

【解决方案1】：

将变量传递给函数。

const MyComponent = (props) => {
  return (
    <div>{addPropData(props)}</div>
  )
}

function addPropData(props) {
  return props.data.name
}

在上下文中，是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="like_button_container"></div>

<script type="text/babel">
  const MyComponent = (props) => {
    return (
      <div>{addPropData(props)}</div>
    )
  }
  
  function addPropData(props) {
    return props.data.name
  }
  
  function App() {
    return (
      <div className="App">
        <MyComponent data={{ name: "myname" }} />
      </div>
    )
  }
  
  const domContainer = document.querySelector('#like_button_container')
  const e = React.createElement
  ReactDOM.render(e(App), domContainer);
</script>

【讨论】：