reactjs - 如何触发一个组件的更改。来自另一个组件

Question

我的 React 应用程序有一个名为 ListOfTenants 的组件，它基本上是一个表格，每行都有一个单选按钮。每次选择一行时，我希望在顶部导航栏中，应该有一个组件显示，您正在处理租户 X。

所以ActiveTenant组件是这样的:

import React, { Component } from "react";
import authAction from "../../redux/auth/actions";

class ActiveTenant extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        You aaare using tenant:
        {this.state.activetenant}
      </div>
    );
  }
}

export default ActiveTenant;

listtenants组件是这样的:

import React, { Component } from "react";
import { Table, Radio } from "antd";
import { adalApiFetch } from "../../adalConfig";

class ListTenants extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  fetchData = () => {
    adalApiFetch(fetch, "/Tenant", {})
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          const results = responseJson.map(row => ({
            key: row.ClientId,
            ClientId: row.ClientId,
            ClientSecret: row.ClientSecret,
            Id: row.Id,
            SiteCollectionTestUrl: row.SiteCollectionTestUrl,
            TenantDomainUrl: row.TenantDomainUrl
          }));
          this.setState({ data: results });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    const columns = [
      {
        title: "Client Id",
        dataIndex: "ClientId",
        key: "ClientId"
      },
      {
        title: "Site Collection TestUrl",
        dataIndex: "SiteCollectionTestUrl",
        key: "SiteCollectionTestUrl"
      },
      {
        title: "Tenant DomainUrl",
        dataIndex: "TenantDomainUrl",
        key: "TenantDomainUrl"
      }
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(selectedRows[0].key);
      },
      getCheckboxProps: record => ({
        type: Radio
      })
    };

    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={this.state.data}
      />
    );
  }
}

export default ListTenants;

和 App.js(主要组件)

import React, { Component } from "react";
import { connect } from "react-redux";
import { Layout } from "antd";
import { Debounce } from "react-throttle";
import WindowResizeListener from "react-window-size-listener";
import { ThemeProvider } from "styled-components";
import authAction from "../../redux/auth/actions";
import appActions from "../../redux/app/actions";
import Sidebar from "../Sidebar/Sidebar";
import Topbar from "../Topbar/Topbar";
import AppRouter from "./AppRouter";
import { siteConfig } from "../../settings";
import themes from "../../settings/themes";
import { themeConfig } from "../../settings";
import AppHolder from "./commonStyle";
import "./global.css";

const { Content, Footer } = Layout;
const { logout } = authAction;
const { toggleAll } = appActions;
export class App extends Component {
  render() {
    const { url } = this.props.match;
    const { height } = this.props;
    return (
      <ThemeProvider theme={themes[themeConfig.theme]}>
        <AppHolder>
          <Layout style={{ height: "100vh" }}>
            <Debounce time="1000" handler="onResize">
              <WindowResizeListener
                onResize={windowSize =>
                  this.props.toggleAll(
                    windowSize.windowWidth,
                    windowSize.windowHeight
                  )
                }
              />
            </Debounce>
            <Topbar url={url} />
            <Layout style={{ flexDirection: "row", overflowX: "hidden" }}>
              <Sidebar url={url} />
              <Layout
                className="isoContentMainLayout"
                style={{
                  height: height
                }}
              >
                <Content
                  className="isomorphicContent"
                  style={{
                    padding: "70px 0 0",
                    flexShrink: "0",
                    background: "#f1f3f6",
                    position: "relative"
                  }}
                >
                  <AppRouter url={url} />
                </Content>
                <Footer
                  style={{
                    background: "#ffffff",
                    textAlign: "center",
                    borderTop: "1px solid #ededed"
                  }}
                >
                  {siteConfig.footerText}
                </Footer>
              </Layout>
            </Layout>
          </Layout>
        </AppHolder>
      </ThemeProvider>
    );
  }
}

export default connect(
  state => ({
    auth: state.Auth,
    height: state.App.toJS().height
  }),
  { logout, toggleAll }
)(App);

如何在 OnChange 事件上触发 ActiveTenant 组件上的更改？

更新

索引(租户)

一个选项卡用于注册(表单)，另一个选项卡是列表。

import React, { Component } from '../../../../../Library/Caches/typescript/2.9/node_modules/@types/react';
import { Row, Col, Tabs } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import RegisterTenantForm2 from './registertenantform2';
import ListTenants from './listtenants';

export default class extends Component {
  render(){
    const { rowStyle, colStyle, gutter } = basicStyle;
    const TabPane = Tabs.TabPane;
    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
              <Tabs defaultActiveKey="1">
                <TabPane tab="Tenant Registration" key="1">
                          <Row style={rowStyle} gutter={gutter} justify="start">
                    <Col md={24} sm={24} xs={24} style={colStyle}>
                      <Box
                        title={<IntlMessages id="tabTitle.TenantRegistration" />}
                        subtitle={<IntlMessages id="pagesmalldescription.TenantRegistration" />}
                      >
                        <ContentHolder>
                            <RegisterTenantForm2 />
                        </ContentHolder>
                      </Box>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tab="Tenant List" key="2">
                  <ListTenants/>
                </TabPane>
              </Tabs>



      </LayoutWrapper>
      </div>
    );
  }
}

和 approuter.js

import React, { Component } from "react";
import { Route } from "react-router-dom";
import asyncComponent from "../../helpers/AsyncFunc";

const routes = [
  {
    path: "",
    component: asyncComponent(() => import("../dashboard"))
  },
  {
    path: "TenantAdministration",
    component: asyncComponent(() => import("../RegisterTenant/index"))
  },
  {
    path: "SiteCollections",
    component: asyncComponent(() => import("../SiteCollections/index"))
  },
  {
    path: "PageTemplates",
    component: asyncComponent(() => import("../PageTemplates/index"))
  }
];

class AppRouter extends Component {
  render() {
    const { url, style } = this.props;
    return (
      <div style={style}>
        {routes.map(singleRoute => {
          const { path, exact, ...otherProps } = singleRoute;
          return (
            <Route
              exact={exact === false ? false : true}
              key={singleRoute.path}
              path={`${url}/${singleRoute.path}`}
              {...otherProps}
            />
          );
        })}
      </div>
    );
  }
}

export default AppRouter;

更新 2顶部栏组件

import React, { Component } from "react";
import { connect } from "react-redux";import { Layout } from "antd";
import appActions from "../../redux/app/actions";
import TopbarUser from "./topbarUser";
import TopbarWrapper from "./topbar.style";
import themes from "../../settings/themes";
import { themeConfig } from "../../settings";
import ActiveTenant from "./activetenant";

const { Header } = Layout;
const { toggleCollapsed } = appActions;
const customizedTheme = themes[themeConfig.theme];

class Topbar extends Component {
  render() {
    const { toggleCollapsed } = this.props;
    const collapsed = this.props.collapsed && !this.props.openDrawer;
    const styling = {
      background: customizedTheme.backgroundColor,
      position: "fixed",
      width: "100%",
      height: 70
    };
    return (
      <TopbarWrapper>
        <Header
          style={styling}
          className={
            collapsed ? "isomorphicTopbar collapsed" : "isomorphicTopbar"
          }
        >
          <div className="isoLeft">
            <button
              className={
                collapsed ? "triggerBtn menuCollapsed" : "triggerBtn menuOpen"
              }
              style={{ color: customizedTheme.textColor }}
              onClick={toggleCollapsed}
            />
          </div>

          <ul className="isoRight">
            <li>
              <ActiveTenant />
            </li>
            <li
              onClick={() => this.setState({ selectedItem: "user" })}
              className="isoUser"
            >
              <TopbarUser />
            </li>
          </ul>
        </Header>
      </TopbarWrapper>
    );
  }
}

export default connect(
  state => ({
    ...state.App.toJS()
  }),
  { toggleCollapsed }
)(Topbar);

Answer 1

我写这个基本示例是为了让您理解。 activeTenant 和 click 事件出现在主组件中，并作为 props 传递给子组件。

活跃租户

class ActiveTenants extends React.Component{
 constructor(props) {
    super(props)
  }

    render(){

     return(
      <h1>{this.props.activetenant}</h1>
     )

    }

}

ListTenants:

class ListTenants extends React.Component{

constructor(props) {
     super(props)
}

listTenant(tenants){
    return tenants.map(t=>{
        return (
         <li data-name={t.name} id={t.id}  onClick={(e)=>{this.props.tenatClick(e)}}>{t.name}</li>
        )
    });

}

render(){

 return(
    <ul>
        {this.listTenant([
            {name:"Tenant one",id:1},
            {name:"Tenant two",id:2},
            {name:"Tenant three",id:3}
        ])}

    </ul>
  )
 }
}

主要成分:

class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        activetenant :"Default tenant"
    }
  }

 changeTenant(e){
    let ele=e.target;
        this.setState({
          activetenant:ele.getAttribute('data-name')
        });
 }

  render() {
    return (
      <div>
        <header>
            <ActiveTenants activetenant={this.state.activetenant} />
        </header>
                <div>
                        <ListTenants tenatClick={this.changeTenant.bind(this)} />               
                </div>
      </div>
    )
  }
}

ReactDOM.render(<Main />, document.querySelector("#app"));

当您单击子组件中的列表时，它将调用主组件的 changeTenant 函数，因为我们将该函数与主组件绑定(bind)。请找到上面例子的工作 fiddle :Example

注意:您可以使用 Redux 更轻松地完成此操作。但是您需要花一些时间来配置所有内容。