条件は、再レンダリングコンポーネントなしに、動的条件をレンダリング同じ成分を反応させます

問題の説明

条件が同じコンポーネントをレンダリング反応しない、何も再レンダリング

render() {
    const { history } = this.props;
    const { submit, loading, stateEditor, loadingPage, detailData } = this.state;
    const elementEditor = (
      <Tabs defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy stateEditor={this.getId()} detailData={detailData} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    const elementAdd = (
      <Tabs defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    return (
      <div className={styles.root}>
        <div style={{ width: 208 }}>
          <Button
            type="link"
            block
            style={{ fontSize: 18, padding: 0, textAlign: 'left', color: '#111111' }}
            onClick={() => { history.goBack() }}
          >
            <Icon type="arrow-left" />
            {stateEditor ? '编辑资源商品' : '新增资源商品'}
          </Button>
        </div>
        {stateEditor ?
          (
            <Spin spinning={loadingPage}>
              {loadingPage ? elementAdd : elementEditor}
            </Spin>
          ) :
          elementAdd}
        <Divider />
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Button loading={loading} type="primary" style={{ marginRight: 8 }} onClick={this.submit}>确认</Button>
          {/* <Button style={{ marginRight: 8 }}>预览</Button> */}
          <Button onClick={() => { history.goBack() }}>取消</Button>
        </div>
      </div>
    );
  }
}

問題の原因

コンポーネントは、動的コンポーネント（動的に更新）で、コンポーネントは、リフレッシュは、同じキーに対して、キーで反応し、同じようにリフレッシュする時間がかかります基づき、リフレッシュする必要があります。

問題解決プロセス

1. 検索再レンダリングされていないコンポーネントを、何の結果ありません
2. 私は、レンダリング条件を使用しているので、そう、気持ちがキー原因ではない不注意主要なコンポーネントをレンダリングレンダリングされたリストの説明については、次の章を参照してください、公式文書の条件は、一部をレンダリング表示するには
3. 同一の構成要素に加えて、キーを与えるようにしてください

問題解決策

render() {
    const { history } = this.props;
    const { submit, loading, stateEditor, loadingPage, detailData } = this.state;
    const elementEditor = (
      <Tabs key="editor" defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy stateEditor={this.getId()} detailData={detailData} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    const elementAdd = (
      <Tabs key="add" defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    return (
      <div className={styles.root}>
        <div style={{ width: 208 }}>
          <Button
            type="link"
            block
            style={{ fontSize: 18, padding: 0, textAlign: 'left', color: '#111111' }}
            onClick={() => { history.goBack() }}
          >
            <Icon type="arrow-left" />
            {stateEditor ? '编辑资源商品' : '新增资源商品'}
          </Button>
        </div>
        {stateEditor ?
          (
            <Spin spinning={loadingPage}>
              {loadingPage ? elementAdd : elementEditor}
            </Spin>
          ) :
          elementAdd}
        <Divider />
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Button loading={loading} type="primary" style={{ marginRight: 8 }} onClick={this.submit}>确认</Button>
          {/* <Button style={{ marginRight: 8 }}>预览</Button> */}
          <Button onClick={() => { history.goBack() }}>取消</Button>
        </div>
      </div>
    );
  }
}