データが1つのコンポーネントから次のコンポーネントに渡されないのはなぜですか？

Question

this.prompt()をTitleBarからPortfolioに渡したいとします。私はそれを正しい方法でやっていますか？

var TitleBar = React.createClass({ 

    render: function() { 
    return(
    <div className="jumbotron"> 
     <div className="container"> 
     <kbd className="fullName">name name</kbd> 
     <button onClick={this.prompt} type="button" className="btn btn-primary portfolio">Portfolio</button> 
     <button type="button" className="btn btn-primary about">About</button> 
     <button type="button" className="btn btn-primary contact">Contact</button> 
     </div> 
     </div> 

    ); 
    } 
}); 

ReactDOM.render(<TitleBar/>, document.getElementById('firstBar')); 

var Portfolio = React.createClass({ 

    this.props.prompt(
    alert("hi"); 
); 

    render: function() { 
    return(
     <p className="text-primary">Portfolio</p> 
    ); 
    } 
}); 

ReactDOM.render(<Portfolio prompt={this.prompt}/>, document.getElementById('portfolio')); 

はここに私のindex.jsファイルです：

var TitleBar = React.createClass({ 

    render: function() { 
    return(
    <div className="jumbotron"> 
     <div className="container"> 
     <kbd className="fullName">name name</kbd> 
     <button onClick={this.prompt} type="button" className="btn btn-primary portfolio">Portfolio</button> 
     <button type="button" className="btn btn-primary about">About</button> 
     <button type="button" className="btn btn-primary contact">Contact</button> 
     </div> 
     </div> 

    ); 
    } 
}); 

ReactDOM.render(<TitleBar/>, document.getElementById('firstBar')); 

var Portfolio = React.createClass({ 

    this.props.prompt(
    alert("hi"); 
); 

    render: function() { 
    return(
     <p className="text-primary">Portfolio</p> 
    ); 
    } 
}); 

ReactDOM.render(<Portfolio prompt={this.prompt}/>, document.getElementById('portfolio')); 

Answer 1

あなたはindex.jsの上部にあなたのbody.jsとimport { body } from "./relativePathTo-body.js"の終わりにexport body;する必要があるだろう

は、ここに私のindex.htmlファイルです。

サイドノート：body.promptを両方のファイルで使用する場合は、そのコードを別のファイルに分割してエクスポートします。次に、index.jsとbody.jsの両方にインポートします。

Answer 2

あなたが明示的にエクスポートして、モジュールまたはオブジェクトをインポートする必要がありますtranspilerとしてバベルを使用しているので：

// in the export file 
var Body = //.. 

// at the bottom of the file using a named export 
export Body 
//------------------------------- 

// in the import file 
import { Body } from './path/to/body.js' 

または

// in the export file 
var Body = //.. 

// at the bottom of the file using a default export 
export default Body 
//------------------------------- 

// in the import file 
import Body from './path/to/body.js' 

また、場合には、この構文がのみ動作することを知ってインポートしていますあなたはバベルのような蒸散器を使用しています。あなたがCommonJS：module.exports = Bodyのような別のモジュールシステムを使用して輸出し、var Body = require('./path/to/body.js')を輸入することを強いられます。

exportsとimportsの他の多くの使用例については、developer.mozilla.orgをご覧ください。