在 React 的功能组件之外声明 Function

Question

看看以下功能组件：

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

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

我想知道是否可以在MyComponent之外声明addPropData function 。 例如，像这样：

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

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

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

谢谢。

Answer 1

将变量传递到 function。

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>