爲什麼不傳遞給下一個組件（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）？

回答

相關問題