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

Question

看看下面的功能组件：

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

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

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

我知道这是行不通的——我想知道的是是否有办法让它工作？ 如果是这样，如何？

谢谢。

Answer 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>