Question

我希望Portfolio课程在this.prompt课程中取Title Bar。我已经有很长一段时间一直在寻找这个，但仍然没有找到具体的解决方案。

现在，我所拥有的只是一个空白屏幕。

这是我的index.html文件：

<!DOCTYPE html>
<html>

  <head>
     <title>name name</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="body.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>
    <div id="body"></div>
    <div id="portfolio">

    </div>

    <script type="text/babel" src="index.js"></script>
    <script type="text/babel" src="body.js"></script>
  </body>

</html>

这是我的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

第一个问题是Portfolio组件中的以下代码：

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

这只是用于定义和/或使用道具的错误语法。如果删除它，您至少会看到呈现的应用程序。

现在您可以看到一些东西，解决更大问题的一种方法是根本不使用道具，而是在TitleBar组件中创建实例方法。这是index.js执行此操作：

var TitleBar = React.createClass({

  render: function() {

    this.prompt = function() { alert('hi'); };

    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({

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

ReactDOM.render(<Portfolio/>, document.getElementById('portfolio'));

或者，您可以在组件外部定义一个函数，并使用名为prompt的道具将其传递给它。以下是替代index.js：

var promptFunc = function() { alert('hi'); };

var TitleBar = React.createClass({

  render: function() {

    return(
     <div className="jumbotron">
      <div className="container">
      <kbd className="fullName">name name</kbd>
        <button onClick={this.props.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 prompt={promptFunc}/>, document.getElementById('firstBar'));

var Portfolio = React.createClass({

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

ReactDOM.render(<Portfolio/>, document.getElementById('portfolio'));

如果您使用后一种方法，最佳做法是为您的组件定义一些propTypes。

为什么不通过这个传递给下一个组件（ReactJS）？

1 个答案: