ReactJS内の別のコンポーネントの状態にアクセスしていますか？

私は2つのコンポーネントを持っています。そのうちの1つは、他のコンポーネントからアクセスしたい状態を持っています。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

起こらないルートコンポーネントは小道具 –

これは動作します。あなたが実際に起こって3つのことを持っている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") 
);

のFooのもここReactDom.RenderのReactDOM.render insetad（レンダリングのための小文字）

作業バージョンを使用します。最初に他の人が言ったように、あなたはレンダリングメソッドで<Foo />を使用する必要があります。次にレンダリングは小文字でなければなりません（ReactDOM.render）はReactDOM.Renderではありません。

最後に、script.jsは、彼らは道あなたがバベルでファイルをロードしようと、私のデベロッパーコンソールで私のために次のエラーが発生し：24は、ファイルの読み込みに失敗しました：：

babel.min.jsを// /C:script.js：クロスオリジンリクエストは、プロトコルスキーム（http、data、chrome、chrome-extension、https）でのみサポートされています。

次のように動作します。ただ1つのファイルに入れて開いてください。

<!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内の別のコンポーネントの状態にアクセスしていますか？

答えて

関連する問題