ReactJS如何在頁面之間傳輸數據？

我在想，如何將數據從我們說的「主頁」傳輸到另一個頁面以顯示結果？

我認爲它與道具有關？但我不完全確定。

我的主頁有輸入/選擇標籤，其中包含名稱，值，用戶和日期的選擇。

我希望能夠獲取所有這些信息並將其輸出到另一個名爲「DisplayResults」的頁面中，也許可以將這些數據用於其他事情，也許可以使用這些信息創建一個表格。

非常感謝您的幫助！

這是我app.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, hashHistory} = require('react-router'); 
var Main = require('Main'); 
var MainPage = require('MainPage'); 
var About = require('About'); 
// Load foundation 
require('style!css!foundation-sites/dist/foundation.min.css') 
$(document).foundation(); 
ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Main}> 
     <Route path="about" component={About}/> 
     <IndexRoute component={MainPage}/> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
);

來源

2017-01-31 Vincent Goh

你曾經走過的任何陣營教程？答案可能有點涉及......但基本上你需要創建具有自己的路由的組件，並且可以通過'props'或作爲全局狀態樹的一部分將數據傳遞給它們（如果使用'redux' ，例如）... – user

您可以將屬性傳遞給子組件，並且@ user1370384提到您需要使用flux，redux，mobx ..等來正確執行它。 – Hosar

有幾種不同的方式...好辦法是使用像終極版或一些國家的管理層MobX

一個簡單的方法是讓您的Main組件將這些數據保存在其狀態中，並將其作爲道具傳遞給其他頁面。由於您使用的是react-router，因此您需要在您的Main組件中克隆this.props.children以添加額外的道具，如數據和設置數據的函數。

你Main組件可能會看起來像

class Main extends Component { 
    constructor(props) { 
     this.state = { 
     data: 'some default data', 
     } 
    } 

    updateData(data) { 
     this.setState({ data }); 
    } 

    render() { 
    return <div> 
     <Header /> 
     {React.cloneElement(this.props.children, { data: this.state.data, setData: this.updateData })} 
    </div> 
    } 
} 

class MainPage extends Component { 

    render() { 
     return <div> 
     <input type="text" onChange={e => this.props.setData({ field: e.target.value })} /> 
     <Link to="/DisplayResults">Go to Results</Link> 
     </div> 
    } 
} 

class DisplayResults extends Component { 
    render() { 
     return <div> 
     {this.props.data.field} 
     </div> 
    } 
}

來源

2017-01-31 20:46:29 jpdelatorre

這就是我一直在尋找的，非常感謝！：D –

很酷。很高興有幫助 – jpdelatorre

技術上作出反應創建一個單頁的應用程序，因此沒有其他頁面將數據傳遞到。

但是，我相信你可能在談論將數據傳遞到components。我總是將我的React應用程序組織成container和component文件夾。容器文件夾是所有邏輯組件所在的位置，而組件文件夾是所有UI組件所在的位置。

讓React如此直觀的一件事是，您可以通過道具輕鬆地將數據從父組件傳遞給子組件。換句話說，我的邏輯組件通過道具將數據傳遞給UI組件。

例如，假設我想我的邏輯組件調用，信息中心，組織機構的數據傳遞給我的UI組件MyChildComponent，我會做這樣的事情：

containers/DashBoard/index.js

export class DashBoard extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    constructor(props) { 
    super(props); 
    this.state = { 
     organizations: null, 
    }; 
    this.rowCallback = this.rowCallback.bind(this); 
    } 

    render() { 
    <MyChildComponent orgs={this.state.organizations} /> 
    } 
}

components/MyChildComponent/index.js

export class MyChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render(){ 
    <div> 
     {this.props.orgs} 
    </div> 
    } 
}

這只是處理傳入數據的一種方法。您還可以傳遞值，而邏輯組件之間的路由，或者使用助焊劑庫像redux創建狀態變量等。

請注意，我的代碼摘錄使用ES6的，並且需要一個通天編譯。我也喜歡使用的UI組件的功能時可能的，因爲我相信那是陣營路

來源

2017-01-31 20:30:56 Turtle

ReactJS如何在頁面之間傳輸數據？

回答

相關問題