상태 비 저장 구성 요소에 메소드를 정의하는 방법은 무엇입니까?

Question

은 단순히이있는 경우 :

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

} 

가 어떻게이 renderList 방법을 정의합니까?

const renderList = function() {} (var 또는 let)과 연결할 수 없습니다. 나는 renderList() {}을 할 수 없다.

올바른 구문은 무엇입니까?

Answer 1

당신이

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 2

당신이

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

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

Answer 3

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

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

} 

Answer 4

내가 인라인 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> 
    } 
} 

내가 권하고 싶지 않다 (그러나 당신이 그것을 원하는 방식으로 문제를 해결 않음) 하는 해킹 방법은 다음과 같이 될 것이다.

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