React

Question

我尝试使用React实现简单页面 - 现在我已经获得了名为Layout的主要组件：

    import * as React from 'react';
import { NavMenu } from './NavMenu';
import SummaryBanner from './SummaryBanner';

export class Layout extends React.Component<{}, {}> {
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                    <SummaryBanner />
                </div>
                <div className='col-sm-9'>
                    { this.props.children }
                </div>
            </div>
        </div>;
    }
}

在this.props.children中定义的孩子中，我有一个代表简单向导的组件 - 几个步骤的形式 - 每个部分都是单独提交的。 组件 SummaryBanner 包含已提交的向导步骤/通过使用fetch方法/调用API接收所有数据。 唯一的问题是，组件 SummaryBanner 在提交时不会重新呈现。

如何做到这一点 - 强制从另一个子组件重新渲染子项？

非常感谢您的任何建议。

编辑：以下是 SummaryBanner 组件的代码：

import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as GlobalStore from '../store/GlobalVariables';

interface FetchDataExampleState {
    collections: CollectionOfQuestions[];
}

type SummaryBannerProps =
    GlobalStore.GlobalState;

class SummaryBanner extends React.Component<SummaryBannerProps, FetchDataExampleState> {
    constructor(props: SummaryBannerProps) {
        super(props);
        this.state = { collections: [] };

        if (this.props.sessionId !== '' && this.props.sessionId !== undefined) {
            fetch(this.props.clientSessionURL + '/' + this.props.sessionId + '/actions/get_main_collections', { method: 'POST', headers: { 'Accept': 'application/json' } })
                .then(response => response.json() as Promise<CollectionOfQuestions[]>)
                .then(data => {
                    this.setState({ collections: data });
                });
        }
    }

    public render() {
        return <ul className="nav metismenu summary-banner" id="side-menu" ref="menu">
            <li className="nav-header">
                <div className="dropdown profile-element"> <span>
                </span>
                    <a data-toggle="dropdown" className="dropdown-toggle" href="#">
                        <span className="clear"> <span className="block m-t-xs"> <strong className="font-bold summary-banner-header">Summary</strong>
                        </span></span> </a>
                </div>
            </li>

            {(this.state.collections === null || this.state.collections.length === 0) ? (<li>No collection available</li>) :
                (
                    this.state.collections.map((collection, nodeIndex) => {
                        return <li key={collection.id}>  {/* Separate collection */}
                            <NavLink to={'/questions/' + collection.id} activeClassName='fa fa-th-large'>
                                <span className="nav-label summary-banner-label">{collection.name}</span>
                            </NavLink>
                        </li>
                    }))
            }
        </ul>;
    }
}

interface CollectionOfQuestions {
    name: string;
    description: string;
    type: string;
    id: string;
    orderInSession: number;
    totalNumberOfCollections: number;
    nodes: CollectionOfNodes[];
}

interface CollectionOfNodes {
    code: string;
    name: string;
    description: string;
    hasAdditionalQuestion: boolean;
    type: string;
    id: string;
    questions: Question[];
}

interface Question {
    name: string;
    text: string;
    description: string;
    productCore: string;
    type: string;
    answers: Answer[];
    possibleAnswers: string[];
    id: string;
}

interface Answer {
    text: string;
}

export default connect(
    (state: ApplicationState) => state.globalVariables,
    GlobalStore.actionCreators
)(SummaryBanner) as typeof SummaryBanner;

Answer 1

这是我首先想到的解决方案：

将collections状态保留在Layout组件中，并将其作为道具传递给SummaryBanner。然后使用Layout中的React.cloneElement()将onSubmit道具传递给向导，如下所示：

<div className='col-sm-9'>
  {React.cloneElement(React.Children.only(this.props.children), {
    onSubmit: this._onSubmit,
  })}
</div>

从表单中调用_onSubmit道具并在_onSubmit中实施Layout，以便更新collections州。

Answer 2

在lg N内部不要使用fetch或任何异步操作，当从服务器返回fetch时，已调用constructor方法。
您可以使用生命周期方法render DOCS 从构造函数中移动此代码：

componentDidMount