Question

我有电影申请。我正在从api tmdb获取数据。默认情况下，会向我显示热门视频，但是我有一个列表，可将我的网址更改为其他列表。现在问题开始了。在onClick之后，我无法将url数据传递给从Nav组件到ListApp组件的同级对象。因为我有一个功能可以关闭导航。而且，我不知道如何在父级中使用它们来替换常用的url。

代码：https://codesandbox.io/s/9z6yll4r6r

预先感谢您的帮助。

子组件Nav.js（在这里我在Nav.js中列出了新的网址）

import React, { Component } from 'react';
import { NavLink } from "react-router-dom";

class Navigation extends Component{

    constructor(props){
        super(props);

        this.state = {
            active: false
        };
        this.toggleClass = this.toggleClass.bind(this);
    };

    // toggle Class after click menu and li elements or X
    toggleClass(){
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };
    render(){
        return(
            <nav className="navigation">   
                <NavLink to="/" className="navigation__link navigation__link--back"><span className="fa fa-angle-left navigation__icon"></span></NavLink>
                <button id="navBtnOpen" className="navigation__link navigation__link--list" onClick={this.toggleClass}>
                    <span className="fa fa-bars navigation__icon"></span>
                    <span className="navigation__title">MOVIE LISTS</span>
                </button>
                <div id="navList" className={"navigation__list " + (this.state.active ? 'navShow': null)}>
                    <button id="navBtnClose" className={"navigation__list-btn " + (this.state.active ? 'showXBtn': null)}><span className="fa fa-times" onClick={this.toggleClass}></span></button>

                    <div className="navigation__list-cont">
                        **<a href="#" className="navigation__list-item" id="popular" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={ (this.toggleClass)(this.url)}>Most popular</a>

                        <a href="#" className="navigation__list-item" id="nowPlaying" url={"https://api.themoviedb.org/3/movie/now_playing?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Now playing</a>

                        <a href="#" className="navigation__list-item" id="topRated" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Top rated</a>

                        <a href="#" className="navigation__list-item" id="upcoming" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Upcoming</a>**
                    </div>
                </div>
            </nav>
        )
    }
}
export default Navigation;

与类ListApp.js关联的父母

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

class ListApp extends Component {
    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
        // this.fetchApi = this.fetchApi.bind(this);
    }
    fetchApi(){
        const urlApi = "https://api.themoviedb.org/3/movie/popular?api_key=642874b006093ef1d8becb7a5a90179c&page=1";

        return urlApi;

    }

    componentDidMount = () => {
        fetch(this.fetchApi())
        .then(resp => resp.json())
        .then(resp => {
            this.setState({
                isLoaded: true,
                items: resp.results
            })
            console.log(this.state.items)

    })  
};
    render() {
        var {isLoaded, items} = this.state;

        return (
            <div className="movie-section" id="movie-section">
                {items.map( (item) => ( <Card key={item.id} item={item} /> ) )};
            </div>

        );
    }
}

export default ListApp;

---更新1 ---

我从该站点https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959做某事，但是现在我遇到了另一个问题。

我正在将数据传递给同级，并且我想更新可下载的URL。因此，我使用了componentDidUpdate，但是当我单击导航中的链接时，callback（）函数仍然会导致获取循环。还有其他方法不会导致此循环吗？我更新了codeandbox。

Answer 1

在Parent.js中：

创建一个名为onLinkChange(e)的方法，该方法将this.state.data设置为e（url）并将该方法作为Navigation传递给prop。
给ListApp一个名为data的道具并将其设置为this.state.data。

在Nav.js中，单击链接调用this.props.onLinkChange(url)。

当您单击链接时，它将调用onLinkChange()并设置数据的新状态，该状态将是URL，导致ListApp通过this.props.data

此处有更深入的解释：https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959

反应|点击后将来自孩子的数据网址传递给同级

1 个答案: