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

您需要export body;末尾的body.js和import { body } from "./relativePathTo-body.js"顶部的index.js。

附注：如果要在两个文件中使用body.prompt，请将该代码分解为另一个文件并导出。然后将其导入index.js和body.js。

Answer 2

由于您使用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')要导入。

在developer.mozilla.org上详细了解exports和imports的许多其他用例。

为什么不会将数据从一个组件传递到另一个组件？

2 个答案: