응답에서 구성 요소 인스턴스 렌더링

Question

React의 다른 구성 요소 클래스에서 구성 요소 클래스의 인스턴스를 렌더링하려고합니다. 그러나 어떤 이유로 브라우저는 구성 요소 인스턴스가 정의되지 않았다고 불평합니다. 나는 그것을 모두 같은 JS 파일 (Codepen의 JS 윈도우)에 가지고있다. 내 코드는 다음과 같습니다. -

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => { 
     <a href="{'/' + page}">{page}</a> 
    }); 

    return <nav>{navLinks}</nav>; 
    } 
}); 

var Page = React.createClass({ 
    render: function() { 
    return (
     <div> 
      <h1 className="text-primary">Welcome!</h1> 
      <NavBar /> 
      <h2 className="text-primary">About Me</h2> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<Page />, document.getElementById('app')); 

여기에있는 앱은 Codepen입니다. 이것은 내가 얻는 오류입니다 -

pen.js:13 Uncaught ReferenceError: NavBar is not defined

나는 무슨 일이 일어나는지 잘 모르겠습니다. NavBar은 내가 이해하는 한 Page의 범위에서 사용할 수 있습니다.

감사합니다.

Answer 1

와

<a href="{'/' + page}">{page}</a> 

이 보이는 교체 당신이 그 안에 무엇을 쓰든 그 기능의 본질입니다. 이 경우 당신은 다른 방법은 함수 본문을 건너 뛰고 직접 문을 반환하는 것입니다

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => { 
     return <a href="{'/' + page}">{page}</a> 
    }); 

    return <nav>{navLinks}</nav>; 
    } 
}); 

같은 return 문을 작성해야합니다. 지도 함수에 return 문만 포함되어 있기 때문에 잘 작동합니다. 대괄호를 건너 뛰고 내용이 부모가 아닌 경우 JSX은 내부적으로 function body with a return 문으로 처리합니다. lambda functions이 Java8

에 소개되고 liuke 내가 생각 나는 제대로

Answer 2

지도 콜백 함수에서 return 문을 놓쳤습니다. map 함수는 항상 array의 수정 된 요소를 반환해야합니다.

당신은 당신이 그것을 의미 => 후 {}를 사용할 때지도

를 반환하는 함수 반환 접근과 지방 화살표 접근 방식을 혼합처럼

return (<a href="{'/' + page}">{page}</a>) 

Answer 3

var navLinks = pages.map((page) => <a href={'/' + page}>{page}</a>); 

없음 중괄호, 더 return 문을 설명하지 수 있어요 당신은

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => (<a href="{'/' + page}">{page}</a>)); 

    return <nav>{navLinks}</nav>; 
    } 
}); 

처럼 사용할 수 많은입니다. 나는 또한 href에 전달 된 값에 주위의 따옴표를 제거 http://codepen.io/free-soul/pen/dOdNby

---

참고 : 나는 eslint :

펜을 좋아한다.

이전에는이 ​​있었다 : www.example.com/{'/' + page}

을하지만 난 당신이처럼 원하는 생각 : 페이지의 모든 값을 <a href="{'/' + page}">{page}</a>

를, 링크 URL이됩니다 www.example.com/contact. 따라서 큰 따옴표는 없습니다.