ReactJS에서 다른 구성 요소의 상태에 액세스하고 있습니까?

2 개의 구성 요소가 있는데, 그 중 하나에는 다른 구성 요소에서 액세스하려는 상태가 있습니다. ReactJS에서 다른 구성 요소의 상태에 액세스하고 있습니까?

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {test:"Hello World"}; 
    } 
    render() { 
    return(<Bar {...this.state} />); 
    } 
} 

class Bar extends React.Component { 
    render() { 
    return(<h1>{this.props.test}</h1>); 
    } 
} 

ReactDOM.Render(
    <Bar />, 
    document.getElementById("root") 
);

나는 조금 주위에 인터넷 검색,하지만 난 JS에 새로 온 사람과 반작용 때문에이 코드가 작동하지 않기 때문에 내가 뭔가를 오해 생각합니다. 나의 이해에서 그것은 "Hello World"를 표시해야하지만, 대신에 아무 일도 일어나지 않습니다.

출처

2017-12-07 Zone

당신이 바의 부모 노드를 렌더링하지 않았다 때문에 대신 – Whymarrh

아무것도 – Zone

을 발생하지 루트 구성 요소로'Foo' 렌더링 시도 –

이렇게하면됩니다. https://codepen.io/anon/pen/OOemzW?editors=1010

출처

2017-12-07 19:33:09

Idk 여기에 정말 분명한 걸 놓치면? 모든 사람이 다음과 같이 말하더라도 작동하지 않습니다./ – Zone

코드를 모두 붙여 넣을 수 있습니까? 귀하의 질문에 따라 우리는 그것이 작동하지 않는 이유를 찾을 수 없습니다 –

현재 나는 React의 기초를 배우고 있습니다. 그래서 그것은 완전한 코드입니다. 내 HTML 파일은 다음과 같습니다 : [pastebin] (https://pastebin.com/dXsxtxru) – Zone

당신은 실제로 세 가지가 일어나고 있습니다 푸 대신 바

렌더링

ReactDOM.Render(
    <Foo />, 
    document.getElementById("root") 
);

또한 (렌더링 낮은 경우) ReactDom.Render의 ReactDOM.render insetad 다음 작업 버전

를 사용합니다. 먼저 다른 사람들이 말했듯이 렌더 방법에서는 <Foo />을 사용하고 두 번째로 렌더링은 소문자이어야합니다 (ReactDOM.render)는 ReactDOM.Render이 아닙니다.

가 마지막으로 script.js 그들이 방법 당신이 바벨로 파일을로드 할, 내 개발자 콘솔에서 나를 위해 다음과 같은 오류가 발생 : (24)는 파일을로드 할 수 없습니다 :

babel.min.js을 // /C:script.js : Cross origin 요청은 http, data, chrome, chrome-extension, https와 같은 프로토콜 스키마에 대해서만 지원됩니다.

다음 작업을 수행하십시오. 그냥 하나의 파일에 넣어 열고 엽니 다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> 
</head> 
<body> 
    <div id="root"></div> 
    <script type="text/babel"> 
    class Foo extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = {test:"Hello World"}; 
     } 
     render() { 
     return(<Bar {...this.state} />); 
     } 
    } 

    class Bar extends React.Component { 
     render() { 
     return(<h1>{this.props.test}</h1>); 
     } 
    } 

    ReactDOM.render(
     <Foo />, 
     document.getElementById("root") 
    ); 
    </script> 
</body> 
</html>

출처

2017-12-07 20:28:13

ReactJS에서 다른 구성 요소의 상태에 액세스하고 있습니까?

답변

관련 문제