Как определить методы в компонентах без состояния?

Ответ 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>
}

Причина, по которой это обычно является плохой практикой, заключается в том, что вы создаете функцию и все выделение памяти требуется для каждого цикла рендеринга. Следовательно, внутренняя оптимизация различий, которая обеспечивает реагирование, обычно бесполезна, если вы делаете это, потому что новая функция дает другую сигнатуру, чем предыдущий цикл рендеринга. Если бы у этого было много детей, они все были бы вынуждены повторно сделать!

Редактировать - Реакция Версия 16.8.0 +

Вы можете использовать крючки для этого. Я бы рекомендовал использовать memo для запоминания функции, поэтому вы не создаете ее в памяти каждый цикл рендеринга.

const RenderList = React.memo(props => (
  <span>Something Here</span>
))

Ответ 2

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

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

}

Ответ 3

Вы хотели бы сделать что-то вроде этого

const App = function() {

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

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

Естественно, это плохой подход, и вам рекомендуется, чтобы вы проходили функции, поскольку реквизит и компонент без гражданства всегда были тупыми компонентами. Скажем, если вы используете сокращение, например, вы можете сделать свой компонент таким, как это.

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)

Ответ 4

Можете ли вы попробовать что-то вроде

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

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