reactjs - 如何在反应模式中传递道具

Question

我正在创建我的第一个 react 项目，我正在使用 GitHub api 来获取用户并首先在卡片视图中显示它们，然后单击更多按钮到我想使用门户创建模式的任何配置文件，直到现在我能够创建一个模态但现在我不知道如何将数据获取到该模态组件

这是我的 App.js

    import React, { Fragment, Component } from 'react';
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
    import Navbar from './components/layout/Navbar';
    import Users from './components/users/Users';
    import User from './components/users/User';
    import Modal from './components/Modal/Modal'
    import Search from './components/users/Search';
    import Alert from './components/layout/Alert';
    import About from './components/pages/About';
    import axios from 'axios';

    import './App.css';

    class App extends Component {
      state = {
        users: [],
        user: {},
        loading: false,
        alert: null,
        modal: {},
      }



      // get users from Search.js
      searchUsers = async text => {
        this.setState({ loading: true })
        const res = await axios.get(
          `https://api.github.com/search/users?q=${text}&client_id=${
          process.env.REACT_APP_GITHUB_CLIENT_ID
          }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);

        this.setState({ users: res.data.items, loading: false })
        console.log(text);
      }

      //get single profile
      getUser = async username => {
        this.setState({ loading: true })
        const res = await axios.get(
          `https://api.github.com/users/${username}?client_id=${
          process.env.REACT_APP_GITHUB_CLIENT_ID
          }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);

        this.setState({ user: res.data, loading: false });
        this.setState({ modal: res.data, loadading: false });
      }



      //clear search
      clearUsers = () => this.setState({ users: [], loading: false });

      setAlert = (msg, type) => {
        this.setState({ alert: { msg: msg, type: type } });

        setTimeout(() => this.setState({ alert: null }), 5000);
      };

      render() {
        return (

          <Router>
            <div className='App'>
              <Navbar />
              <div className="container">
                <Alert alert={this.state.alert} />
                <Switch>
                  <Route exact path='/'
                    render={props => (
                      <Fragment>
                        <Search
                          searchUsers={this.searchUsers}
                          clearUsers={this.clearUsers}
                          showClear={this.state.users.length > 0 ? true : false}
                          setAlert={this.setAlert}
                        />
                        <Users loading={this.state.loading} users={this.state.users} />
                      </Fragment>
                    )} />
                  <Route path='/about' component={About} />
                  <Route path='/user/:login' render={props => (
                    <User {...props} getUser={this.getUser} user={this.state.user} loading={this.state.loading} />
                  )} />

                  <Route path='/modal/:login' render={props => (
                    <Modal {...props} getUser={this.getUser} modal={this.state.modal} loading={this.state.loading} />
                  )} />

                </Switch>

              </div>
            </div>

          </Router>

        );
      }

    }

    export default App;


here is my Modal.js



import React, { Fragment, Component } from 'react';
import ReactDom from 'react-dom';
import Spinner from '../layout/Spinner';
import { Link } from 'react-router-dom';
const modalRoot = document.getElementById('modal');

export default class Modal extends Component {

    constructor() {
        super();
        this.el = document.createElement('div');
    }

    componentDidMount = () => {
        modalRoot.appendChild(this.el);
    };
    componentWillUnmount = () => {
        modalRoot.removeChild(this.el);
    };

    render() {


        const {
            children,
            name,
            avatar_url,
            location,
            bio,
            blog,
            followers,
            following,
            public_repos,
        } = this.props.modal;

        const { loading } = this.props;
        if (loading) return <Spinner />
        return (


            ReactDom.createPortal(children, this.el)

        )

    }
}

任何指南都会提前感谢

标签： reactjs

Answer 1

您已经将道具传递给 Modal。

在模态中，做类似的事情

Class Modal extends Component {
  constructor(){
     super(props);
  }
  render(){
    const {
      modal,
      getUser,
      loading,
      anyOtherPropYouPassIn
    } = this.props;

    const { loading } = this.props;
    if (loading) return <Spinner />
    return (
        ReactDom.createPortal(children, this.el)
    )
}