Question

如果我只是：

const App = function() {
    return (
        <div>{this.renderList()}</div>
    )

}

如何定义renderList方法？

我无法const renderList = function() {}（也不能var或let）。我无法renderList() {}。

什么是正确的语法？

Answer 1

我对于解决这个问题犹豫不决，因为内联Stateless Functions不应该有方法。如果你想要一个方法，你应该使用Class，并且使用类没有任何问题。一切都基于你需要做的事情。 Stateless Functions被设计成一种超轻量级的方式来呈现不需要方法，状态甚至是这个上下文的东西（就类而言）。

你应该这样做。

class App extends Component {
    constructor(){
        super();
        // note this is a Stateless Component because its a react class without a state defined.
    }
    renderList = () => {
        return <span>Something Here</span>;
    }
    render() {
        return <div>{this.renderList()}</div>
    }
}

HACK 我不推荐的方式（但确实以您希望的方式解决您的问题）就像这样。

const App = () => {
    let renderList = () => {
        return <span>Something Here</span>
    }
    return <div>{renderList()}</div>
}

Answer 2

const App = function() {
  const renderList = ()=> {
      return "this variables"
     }

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

}

Answer 3

你会想要做这样的事情

const App = function() {

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

}
  function renderList(){
      return "this variables"
     }

当然，这是一个糟糕的方法，你建议你传递函数作为道具和无状态组件总是愚蠢的组件。比如说你是否正在使用redux，你可以让你的组件像这样呈现

import {connect} from 'react-redux';
const App = (props) => {
   return (
      <div> {props.renderList} </div>
    )
}
function renderList (){
   return "your render logic"
}
export default connect(null, {renderList})(App)

Answer 4

你可以试试像

这样的东西

const App = () => {
  return (
    <div>{this.renderList()}</div>
  )
}

App.renderList = () => {
    return 'This is my list'
}

Answer 5

您可以将渲染列表功能创建为独立功能，并使用function参数将props传递给function。

如何在无状态组件中定义方法？

5 个答案: