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

我想Portfolio类采取Title Bar类中的this.prompt。我一直在寻找这个相当长的一段时间，但仍然没有找到具体的解决方案。为什么不传递给下一个组件（ReactJS）？

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

这是我的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/[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-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'));

来源

2017-01-26 chompy

的第一个问题是下面的代码中，Portfolio组件内部：

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

这是只是定义一个不正确的语法d /或使用道具。如果你删除它，你至少会看到应用程序呈现。现在

，你可以看到的东西，为您解决更大问题的一个方法是不使用的道具在所有，但创造的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为组件的最佳实践。

来源

2017-01-26 02:20:51 sighrobot

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

回答

相关问题