Il existe un code qui affiche les messages et en cliquant sur un message affiche le contenu complet de ce message.

import React from "react";


type respX = {
    "id": any,
    "userId": any,
    "title": any,
    "body": any,
}

interface PropsI {
}

interface StateI {
    data: respX[];
    changedBody: string
    changedTitle: string
}

export class ComponentPostList extends React.Component<PropsI, StateI> {

    state: StateI = {data: [], changedBody: '', changedTitle: 'Click to choose article'}

    async getPostById(id: any) {
        const myResponse = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
        const myJson = await myResponse.json();
        this.setState({changedBody: myJson.body, changedTitle: myJson.title});
    }

    async componentDidMount() {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
        const json = await response.json();
        this.setState({data: json});
    }


    render() {
        return (
            <div className="About">
                <div className="content">
                    <div className="title">{this.state.changedTitle}</div>
                    <div className="article">{this.state.changedBody}</div>
                </div>
                {this.state.data.map(el => (
                    <li onClick={e => this.getPostById(el.id)} key={el.id}>
                        {el.title}
                    </li>
                ))}
            </div>
        );
    }
}

Comment transférer des données d'un composant à un autre ? Pour rendre les en-têtes de publication dans un composant, et déjà le contenu complet de la publication dans un autre composant. Ces composants sont au même niveau :

  <ComponentPostList data = {data} onClick = (getPostById) />
  <ComponentArticle post = {post} />
0
Moo 3 févr. 2020 à 15:39

1 réponse

Meilleure réponse

Je préfère utiliser une fonction de rappel dans ce cas. C'est un moyen simple de résoudre votre problème.

Vous avez 2 composants. Vous pouvez transmettre une fonction à un composant enfant pour recevoir une valeur d'un composant enfant à son parent.

class Parent extends React.Component {
  state = { post: null, data: null }

  async componentDidMount() {
    const data = await fetchData()
    this.setState({ data })
  }

  getPostById = async (id: any) => {
    const myResponse = await fetch(url);
    const post = await myResponse.json();
    this.setState({ post });
  }

  render() {
    <ComponentPostList 
      data={this.state.data} 
      postTitle={this.state.post.title} 
      changedBody={this.state.post.changedBody} 
      handleClick={this.getPostById}
    />
    <ComponentArticle postBody={this.state.post ? this.state.post.body : ''} />
  }
}

Et votre ComponentPostList devrait être comme ça...

class ComponentPostList extends React.Component {
    render() {
        return (
            <div className="About">
                <div className="content">
                    <div className="title">{this.props.postTitle}</div>
                    <div className="article">{this.props.changedBody}</div>
                </div>
                {this.props.data.map(el => (
                    <li onClick={e => this.props.handleClick(el.id)} key={el.id}>
                        {el.title}
                    </li>
                ))}
            </div>
        );
    }
}

Sur ComponentArticle, vous utilisez des accessoires pour accéder à la valeur pour rendre le contenu.

0
chin8628 3 févr. 2020 à 18:05