Question

我有三个组件，如下面

A.js

import React, { Component } from 'react';
import B from './B';
export class A extends Component {
    ajaxmethod = () => {
        //fetching data through ajax method.

    }
    render() {
        return (
            <div>
                <B/>
            </div>
        );
    }
}

B.js

import React, { Component } from 'react';
import C from './C';

//this is a Modal container
export class B extends Component {
    render() {
        return (
            <div>
                <C/>
            </div>
        );
    }
}

C.js

import React, { Component } from 'react';

//this is Modal elements
export class C extends Component {
    render() {
        return (
            <div>
                I need to display data here from A Component
            </div>
        );
    }
}

A.js组件中有按钮。单击时，哪个按钮显示模态（B.js）。 B.js是模态容器组件。 C.js是模态元素组件。我在A.js组件中有一个AJAX方法。我想在C.js的{{1}}中显示数据。

我该怎么做？

更新

我在A.js组件中使用了以下代码。

B.js

Answer 1

好吧，A可以在ajax调用完成后设置自己的状态，然后将其作为道具传递给B，然后B将其传递给C。

类似的东西：

A.js

import React, { Component } from 'react';
import B from './B';
export class A extends Component {
    ajaxmethod = () => {
        // set loading state to true
        this.setState({ loading: true });
        ajax()
          .then(data => {
             // ajax request finished, set data to state and set loading to false
             this.setState({ fetchedData: data, loading: false });
          })
    }

    renderModal() {
        const { fetchedData, loading } = this.state;

        // check if data fetch successful and is currently not loading other data, then render
        if (fetchedData.status === 'OK' && !loading) { 
          return <B fetchedData={fetchedData} />;
        }
    }

    render() {
        return (
            <div>
                {this.renderModal()}
            </div>
        );
    }
}

B.js

import React, { Component } from 'react';
import C from './C';

//this is a Modal container
export class B extends Component {
    render() {
        return (
            <div>
                <C fetchedData={this.props.fetchedData} />
            </div>
        );
    }
}

然后在C.js中，您只需访问this.props.fetchedData。

Answer 2

Ajax请求的成功回调应该在A中设置一个状态属性：

this.setState({data: getYourDataFromTheResponse});

将此作为B：

的道具之一传递

<B data={this.state.data} />

并且B应该将其传递给C：

的其中一个道具

<C data={this.props.data} />

Answer 3

有三种选择： -

1. Use redux store(global store);
2. Use Context API if the version is React v16.3
3. Props Bouncing

使用redux store（全球商店）

有点复杂。您应该了解redux store，actions，reducers然后将数据保存在store中并使用mapStateToProps获取任何组件。

https://redux.js.org/basics/store

上下文Api： -

如果您使用的是最新版本的react，那么它将为您提供上下文api功能。

const AppContext = React.createContext()

export class A extends Component {
    ajaxmethod = () => {
        //fetching data through ajax method.
        this.setState({data: response})
    }
    render() {
        return (
            <AppContext.Provider value={this.state}>
                <B/>
            </AppContext.Provider>
        );
    }
}

B.js component similar to your created component

C.js

    export class C extends Component {
        render() {


     return (
            <AppContext.Consumer>
            {(data) => {
               // here your data
            }}
          </AppContext.Consumer>
        );
    }
}

https://hackernoon.com/how-to-use-the-new-react-context-api-fce011e7d87

道具弹跳： -

A.js

import React, { Component } from 'react';
import B from './B';

    export class A extends Component {
        ajaxmethod = () => {
            //fetching data through ajax method.
            this.setState({data: response});

        }
        render() {
            return (
                <div>
                    <B data={this.state.data}/>
                </div>
            );
        }
    }

B.js

import React, { Component } from 'react';
import C from './C';

    //this is a Modal container
    export class B extends Component {
        render() {
            return (
                <div>
                    <C {...this.props}/>
                </div>
            );
        }
    }

C.js

import React, { Component } from 'react';

//this is Modal elements
export class C extends Component {
    render() {
        return (
            <div>
                {this.props.data} // you can use your data here.
            </div>
        );
    }
}

将数据传递给react.js中的嵌套组件

3 个答案: