javascript - 为什么数据不会从一个组件传递到下一个组件？

Question

我想将 this.prompt() 从 TitleBar 传递到 Portfolio。我的做法是否正确？

这是我的 index.html 文件:

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

由于您使用 Babel 作为转译器，因此您必须显式导出和导入模块或对象:

// 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'

同样重要的是要知道此语法仅在您使用像 Babel 这样的转译器时才有效。如果你不这样做，你将被迫使用另一个模块系统，如 CommonJS:module.exports = Body 导出和 var Body = require('./path/to/body. js') 导入。

阅读更多有关 exports 的许多其他用例的信息和 imports在 developer.mozilla.org。