javascript - 如何在不使用 Redux 的情况下在 React 中将变量值从子级发送到父级

Question

我有一个博客组件，里面有一个搜索组件。我需要访问searchResults我的博客组件中的变量。如何将它从 Search 组件传递到 Blog 组件？

这是父级（博客组件）：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from "react-pagination-js";
import Spinner from '../Spinner/Spinner';
import { Link } from 'react-router-dom';
import Footer from '../Footer/Footer.jsx';
import CustomHeader from '../CustomHeader/CustomHeader.jsx';
import Search from '../Search/Search.jsx';



const Blog = () => {

  let title = 'Articles'

  let [posts, setPosts] = useState([]);
  let [isMounted] = useState(false)
  let [currentPage, setCurrentPage] = useState(1);
  let [loading, setLoading] = useState(false);
  let [isVisible] = useState(true);
  const [postsPerPage] = useState(5);
  const GET_POSTS_API = process.env.REACT_APP_GET_POSTS_API;



  useEffect(() => {
    const fetchPosts = async () => {
      isMounted = true;
      setLoading(true);
      if (isMounted) {
        let res = await axios.get(GET_POSTS_API);
        setPosts(res.data);
      }
      setLoading(false);
    };

    fetchPosts();
  }, []);

  isMounted = false
  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
  let totalPagesGenerated = posts.length / postsPerPage;
  let totalPagesGeneratedCeiled = Math.ceil(totalPagesGenerated);
  if (loading) {
    return <Spinner />
  }

  // Change page
  const paginate = (pageNumber) => {
    Math.ceil(totalPagesGenerated)
    if (pageNumber > 0 && pageNumber <= totalPagesGeneratedCeiled) {
      setCurrentPage(pageNumber);
    }
  }

  return (
    <div>
      <CustomHeader
        title={title}
      />
      <Search />
      <div className="row">
        <div className="column">
          {currentPosts.map(post => (
            <div key={post._id} className='post'>
              <img className="post-container__image" src={post.picture} alt="avatar" />
              <div className="post-container__post">
                <div className="post-container__text">
                  <h2 className="post-container__title">{post.title}</h2>
                  <p className="post-container__date">{post.date}</p>
                  <p className="post-info-container__text">{post.postContent.substr(0, 310) + "..."}</p>
                  <Link to={`/post/${post._id}`} className="read-more-btn">
                    <button className="read-more-btn">Read more</button>
                  </Link>
                </div>
              </div>
            </div>
          ))}
          <Pagination
            currentPage={currentPage}
            currentPosts={currentPosts}
            showFirstLastPages={true}
            sizePerPage={postsPerPage}
            totalSize={posts.length}
            totalPages={posts.length}
            changeCurrentPage={paginate}
          />
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Blog;

这是孩子（搜索组件）：

import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import { Link } from 'react-router-dom';
import axios from "axios";

class Search extends Component {
    constructor(props) {
        super(props);

        this.state = {
            searchResults: [],
            isLoading: false,
            isSearchStringFound: true,
            placeholder: ''
        }
    }

    handleSearchQuery = (event) => {
        const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;
        let searchString = document.querySelector(".search-input").value;

        if (event.keyCode === 13) {
            this.setState({ ...this.state, isLoading: true });
            axios.post(SEARCH_RESULTS_ENDPOINT, {
                searchString: searchString,

            }).then(response => {
                this.setState({ ...this.state, searchResults: response.data });

                if (response.data.length === 0) {
                    this.setState({ ...this.state, isSearchStringFound: false });
                }

                else if (response.data.length > 0) {
                    this.setState({ ...this.state, isSearchStringFound: true });
                }

                this.setState({ ...this.state, isLoading: false });
            });

            this.setState({ ...this.state, placeholder: searchString });
        }
    };


    render() {

        if (this.state.isLoading) {
            return <Spinner />
        }
        return (

            <div>
                <div>
                    <input
                        type="text"
                        placeholder={this.state.placeholder}
                        className="search-input"
                        onKeyDown={(e) => this.handleSearchQuery(e)}
                    />

                    <div className="results-container">
                        <div>
                            {this.state.isSearchStringFound === false ? <div className="no-results-found">No results were found</div> : this.state.searchResults.map(result => (
                                <div key={result._id} className="results-box" >
                                    <img src={result.picture} alt="avatar" className="results-container-img" />
                                    <div className="results-box-body">
                                        <div>
                                            <h2>{result.title.toUpperCase()}</h2>
                                            <p>{result.postContent.substr(0, 310) + "..."}</p>
                                            <p>{result.date}</p>
                                            <Link to={`/post/${result._id}`} className="read-more-btn">
                                                <button className="read-more-btn">Read more</button>
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Search;

不使用 Redux 是否可以做到这一点？

score 0 · Accepted Answer

您可以使用回调函数来做到这一点。

您基本上将一个函数传递给您的子组件，您的子组件将触发该函数，而父组件将具有该值。

这是一个应该如何实现的简单示例：

家长：

const Parent = () => {
  const onSearchResult = searchResults => {
    console.log(searchResults)
 }

  return (
    <>
      I am the parent component
      <Child onSearchResult={onSearchResult} />
    </>
  )
}

孩子：

const Child = onSearchResult => {
  const calculateResults = e => {
    const results = doSomeStuff(e)
    onSearchResult(results)
  }

  return (
    <>
      I am the child component
      I have a component that will return some value
      <input onKeyPress={e => calculateResults(e)}
    </>
  )
}

score 0 · Accepted Answer

子组件应该从作为回调的父组件中获取一个属性。有点像按钮的工作方式：

<Button onClick={this.onButtonClick}

你想要做的是

<SearchComponent onSearchResults={this.onResults}

然后，在搜索组件中，您可以调用this.props.onSearchResults(searchResults);

score 0 · Accepted Answer

我更喜欢将变量传递给子组件的两种方法。它们在不同的情况下都有用

方法一：使用属性 => 道具

如果您的组件树没有深度嵌套，此方法很有用。例如，您希望将变量从父级传递给子级。

一个嵌套组件如下

const ParentComponent = () => {
 
     const [variable, setVariable] = useState(0);

     return (
         <ChildComponent variable={variable} setVariable={setVariable} /> //nested within ParentComponent, first level
      )
}

const ChildComponent = (props) => {
    
      return(
          <>
              <div>prop value is {props.variable}</div> //variable attribute available through component props
              <button onClick={props.setVariable(prevValue => prevValue+1}>add +1</button> //set value in parent through callBack method
          </>
       )

}

如果你有一个高度嵌套的组件层次结构，事情会变得有点混乱。假设 ChildComponent 返回另一个组件，并且您希望variable将传递到该组件，但 ChildComponent 不需要该变量，您最终会遇到这种情况

const ParentComponent = () => {
 
     const [variable, setVariable] = useState(false);

     return (
         <ChildComponent someProp={variable}/> //nested within ParentComponent, first level
      )
}

const ChildComponent = (props) => {
    
      return(
          <AnotherCustomComponent someProp={props.someProps}/> //someProp attribute available through component props
       )

}


const AnotherCustomComponent = (props) => {
    
      return(
          <div>prop value is {props.someProp}</div> //someProp attribute available through component props
       )

}

即使 ChildComponent 不需要该道具，它也需要通过道具将其推送到其子组件。这被称为“支柱钻孔”。这是一个简单的示例，但对于更复杂的系统，它可能会变得非常混乱。为此，我们使用...

方法二：Context API CodeSandbox

上下文 API 提供了一种为子组件提供状态的简洁方式，而不会导致道具钻探情况。它要求一个Provider被设置，它将其值提供给它的任何Consumers'. Any component that is a child of the Provider` 可以使用上下文。

首先创建一个上下文。

CustomContext.js

import React from 'react';

const CustomContext = React.createContext();

export function useCustomContext() {
  return React.useContext(CustomContext);
}

export default CustomContext;

接下来是实现提供者，并给它一个值。我们可以使用之前的 ParentComponent 并添加 Context 提供程序

import CustomContext from './CustomContext'

const ParentComponent = () => {

  const [variable, setVariable] = useState(false);

  const providerState = {
    variable,
    setVariable
  }

  return (
    <CustomContext.Provider value={providerState} >
      <ChildComponent />
    </CustomContext.Provider>
  )
}

现在嵌套在 <CustomContext.Provider></CustomContext.Provider> 中的任何组件都可以访问传递给Provider

我们嵌套的子组件将如下所示

const ChildComponent = (props) => {

  return(
      <AnotherCustomComponent/> //Notice we arent passing the prop here anymore
   )

}


const AnotherCustomComponent = (props) => {

  const {variable, setVariable} = useCustomContext(); //This will get the value of the "value" prop we gave to the provider at the parent level

  return(
      <div>prop value is {variable}</div> //variable pulled from Context
   )

}

如果 ParentComponent 被使用两次，则 ParentComponent 的每个实例都将有自己的“CustomContext”可供其子级使用。

const App() {

    return (
        <>
            <ParentComponent/> 
            <ParentComponent/>
        </>    

}

javascript - 如何在不使用 Redux 的情况下在 React 中将变量值从子级发送到父级

3 回答 3

Related

Reference