Question

我能够在名为SubmitProject的特定组件上设置setState，该组件位于特定的路由/submit上。现在，我还有一条路由/portfolio，其中包含一个名为Portfolio的组件，我想知道如何从SubmitProject获得状态，使其与Portfolio相同？状态彼此嵌套的组件。我最终想要做的是使用一种表单提交文本以在/submit路由上声明状态，然后在/portfolio路由上进行相同的状态数据更新。

我可能会错误地进行设计，如果所有内容都可能在APP组件中并且我做的路由不同，那么我对React还是很陌生，所以我绝对需要有关如何设置项目的指导。

好，谢谢。

这是我的相关代码

src/components/SubmitProject.js

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

class SubmitProject extends React.Component {
    state = {
        sections:{}
    };
    addSection = section =>{
        const sections = {...this.state.sections};
        sections[`section${Date.now()}`] = section;
        this.setState({
            sections: sections
        });
    }
    render() {
        return(
            <React.Fragment>
                <h1>Submit Project</h1>
                <h2>Enter Project Data</h2>
                <PortfolioForm addSection={this.addSection} />
            </React.Fragment>
        )
    }
}

export default SubmitProject;

src/components/PortfolioForm.js

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

class Portfolio extends React.Component {
    render() {
        return(
            <React.Fragment>
                <h1>Submit Form</h1>
                <FormAdd addSection={this.props.addSection}/>
            </React.Fragment>
        )
    }
}

export default Portfolio;

src/components/FormAdd.js

import React from 'react';

class FormAdd extends React.Component {
    nameRef = React.createRef();

    createSection = (event) =>{
        event.preventDefault();
        const section = {
            name: this.nameRef.current.value
        };
        this.props.addSection(section);
    };  
    render() {
        return(
            <React.Fragment>
                <form onSubmit={this.createSection}>
                    <input type="text" ref={this.nameRef} name="name" placeholder="Name"/>
                    <button type="submit">+ Add Section</button>
                </form>
            </React.Fragment>
        )
    }
}

export default FormAdd;

src/components/Router.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Portfolio from './Portfolio';
import SubmitProject from './SubmitProject';
import App from './App';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route exact path="/portfolio" component={Portfolio}/>
            <Route exact path="/submit" component={SubmitProject}/>
        </Switch>
    </BrowserRouter>
);

export default Router;

src/Portfolio.js

import React from 'react';

class Portfolio extends React.Component {
    //CAN I GET STATE FROM SubmitProject.js FILE IN HERE?
    render() {
        return(
            <React.Fragment>
                <h1>Portfolio Page</h1>
                <h2>List of projects</h2>        
            </React.Fragment>
        )
    }
}

export default Portfolio;

Answer 1

如果您使用的是React 16，则可以使用Context API来解决。这将涉及对您的代码进行以下调整：

 public SimpleStepBuilder<I, O> processor(ItemProcessor<? super I, ? extends O> processor) {
    this.processor = processor;
    return this;
}

public SimpleStepBuilder<I, O> processor(Function<? super I, ? extends O> function) {
    this.itemProcessorFunction = function;
    return this;
}

public interface ItemProcessor<I, O> {
    @Nullable
    O process(I item) throws Exception;
}

然后更新您的SubmitProject组件以使用// PortfolioContext.jsx // Define a PortfolioContext component with initial shared 'sections' state export default const PortfolioContext = React.createContext( sections : {} );组件更新共享的PortfolioContext状态：

sections

还要更新您的投资组合组件以使用// SubmitProject.jsx // Use the ProtfolioContext component in your SubmitProject component to update // the shared for use in the Portfolio component import React from 'react'; import PortfolioForm from './PortfolioForm'; import PortfolioContext from './PortfolioContext'; class SubmitProject extends React.Component { constructor (props) { super(props) this.state = { sections:{} }; } addSection = section =>{ const sections = {...this.state.sections}; sections[`section${Date.now()}`] = section; this.setState({ sections: sections }); } render() { return( { /* Inject the local sections state into provider */ } <PortfolioContext.Provider value={this.state.sections}> <React.Fragment> <h1>Submit Project</h1> <h2>Enter Project Data</h2> <PortfolioForm addSection={this.addSection} /> </React.Fragment> </PortfolioContext.Provider> ) } } export default SubmitProject;组件来获取共享状态：

PortfolioContext

希望有帮助！

在不同页面路由上的不同组件中反应状态

1 个答案: