javascript - ReactJS 如何在转到另一个 URL 时传递状态？ (单击导航栏上的 "New"，转到提交表单)

Question

我在我的 React 应用程序中添加了一个导航，通过它我可以单击链接“新建”，进入新页面以提交我的表单。

但是，如何将我的状态传递到此页面？首先，这是我使用 React 的第三天，所以我很可能做错了:

在 main.js 中，我声明了我的路线:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}/>
        <Route path="/submit" component={NewLink}/>
        <Route path="*" component={NotExist}/>
    </Router>
)

在我的应用程序组件中，我只有两个主要组件(其中使用了更多组件):

render : function() {
        return (
            <div>
                <TopNav />

                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

因此，主页显示了所有链接(类似于网页 reddit)，并且从导航栏转到 newLinkForm，用户可以在其中创建要提交的新链接。但是，我如何将我的状态发送到这里？通过 TopNav 组件？

新更新的代码:

main.js

import React from 'react';
import ReactDOM from 'react-dom';


/*
    Router components
*/
import {Router,Route} from 'react-router';
import {createHistory} from 'history';

import NotFound from './components/NotFound';
import App from './components/App';
import CreatePost from './components/CreatePost';

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={CreatePost}/>
        </Route>

        <Route path="*" component={NotFound}/>
    </Router>
)

ReactDOM.render(routes, document.querySelector('#main'));

App.js

import React from 'react';

import NavigationBar from './NavigationBar';
import CreatePost from './CreatePost';
import DisplayPosts from './DisplayPosts';
import NewPostForm from './NewPostForm';

var App = React.createClass({
    getInitialState : function() {
        return {
            posts : {}
        }       
    },
    componentDidMount : function() {        

        var my_localStorage = localStorage.getItem('post-');

        if(my_localStorage) {
            // update component state to reflect what is in local storage
            this.setState({posts : JSON.parse(my_localStorage)});
        }
    },
    componentWillUpdate : function(nextProps, nextState) {
        localStorage.setItem('post-' , JSON.stringify(nextState.posts));
    },
    addPostToPosts : function(post) {
        //console.log(post);
        var timestamp = (new Date().getTime()); //research how to use uuid instead 
        this.state.posts[timestamp] = post;
        this.setState({ posts : this.state.posts });
        //console.log("key is " + Object.keys(this.state.posts));
    },
    render : function() {
        //<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
        return (
            <div>
                <NavigationBar/>
                    {this.props.children}
                <DisplayPosts postData={this.state.posts} />
            </div>
        )
    }
});

export default App;

NavigationBar.js

import React from 'react';
import {Navbar,Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';

var NavigationBar = new React.createClass({

    render : function() {
        return(
            <Navbar className="my-navbar">
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">Main React</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                  <NavItem eventKey={1} href="/submit">New Post</NavItem>                 
                </Nav>
            </Navbar.Collapse>
          </Navbar>         
        )
    }
});

export default NavigationBar

NewPostForm.js

import React from 'react';
import {History} from 'react-router';

var NewPostForm = React.createClass({
    goBack : function(e) {
        e.preventDefault();
        console.log(this.history);
        //this.history.goBack();
    },
    mixins : [History],
    createNewPost : function(e) {
        e.preventDefault();
        //alert("pressed submit");
        if((this.refs.title.value).length === 0 || (this.refs.message.value).length === 0 || (this.refs.image).length === 0) {
            alert("Please fill out all fields!");
        }
        else {
            //alert("yay");
            //create new post object and send it to parent this.state.posts
            var post = {
                title : this.refs.title.value,
                message : this.refs.message.value,
                image : this.refs.image.value
            }
            //console.log(post);
            this.props.addPostToPosts(post);
            this.refs.newPostForm.reset();
        }
    },  
    render : function() {
        //make this to react bootstrp
        return (
            <form className="new-post-form" ref="newPostForm" onSubmit={this.createNewPost}>
                <div className="form-group">
                    <label>Title</label>
                    <input className="form-control" type="text" ref="title" placeholder="Title" />
                </div>
                <div className="form-group">
                    <label>Message</label>
                    <textarea className="form-control" type="text" ref="message" placeholder="Share your message" />
                </div>
                <div className="form-group">
                    <label>Image</label>
                    <input className="form-control" type="text" ref="image" placeholder="Share an image URL" />
                </div>
                <button type="submit" className="npf-btn btn btn-primary">Submit</button>               
                <button type="button" className="npf-btn btn btn-default" onClick={this.goBack}>Cancel</button>         
            </form>
        )
    }
});

export default NewPostForm;

CreatePost.js

import React from 'react';
import NewPostForm from './NewPostForm';

var CreatePost = React.createClass({

    render : function() {
        return (
            <NewPostForm addPostToPosts={this.props.addPostToPosts}/>
        )
    }
});

export default CreatePost;

Answer 1

不确定这会回答您的问题，但我认为您更多的是询问如何处理导航而不是任何形式的状态。

自从您尝试创建新链接以来，似乎没有理由让您传递状态。我认为你真正想问的是:

How do I get my TopNav and my ShowLinks components to also appear on my new /submit page.

这个问题的答案很简单。您可以嵌套路由。

对我来说，你想做的是:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={NewLink}/>
        </Route>

        <Route path="*" component={NotExist}/>
    </Router>
)

通过将 NewLink 与您的 App 组件包装在一起，您可以使用已经设置的导航布局，并且只需传递 props 即可。

render : function() {
        return (
            <div>
                <TopNav />
                {this.props.children}
                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

我添加的行{this.props.children}，您可以将其视为子组件现在将呈现的位置。因此，当您访问 /submit 时，您将同时使用 App 组件和其内部的 NewLink 组件。

希望这是您正在寻找的:)