Как использовать дочерний массив в React

Как насчет использования реквизита? Я знаю, что это противоречит вопросу, но это лучший способ сделать это. Я также добавил типы для ясности, но, пожалуйста, опустите их, если не используете машинописный текст.

interface SearchPageProps {
  title: string;
  generateForm: (event: React.FormEvent) => React.ReactNode;
  table: React.ReactNode;
}

export const SearchPage: React.FC<SearchPageProps> = ({ title, form, table }) => {
  const handleSubmit = (event: React.FormEvent) => {
  }

  return (
    <div>
      <h1>{title}</h1>
      <div className = "form">
        {generateForm(handleSubmit)}
      </div>

      <div className = "table">
        {table}
      </div>
    </div>
  );
};

const MyPage = () => {
  return (
    <SearchPage
      title = "Search Page"
      generateForm = {(event) => <input useSomethingFromSearchPageHere></input>}
      table = {<table></table>}
    />
  );
};

Чтобы достичь своей цели — получить доступ к переменным и методам SearchPage из дочерних компонентов, вы можете использовать контекстную систему React.

Сначала определите новый контекст, который будет использоваться для передачи метода handleSubmit и любых других необходимых данных или методов.

import React, { createContext, useContext, useCallback } from 'react';
// Create the context
const SearchPageContext = createContext();
// Custom hook to use the context
export const useSearchPage = () => useContext(SearchPageContext);

Обновите компонент SearchPage, чтобы использовать SearchPageContext.Provider для передачи метода handleSubmit и любого другого необходимого состояния или функций.

const SearchPage = ({ title, children }) => {

 const handleSubmit = useCallback((event) => {
     event.preventDefault();
     // Your submit logic here
 }, []);

// The value object includes everything you want to expose to children
const value = { handleSubmit };

return (
    <SearchPageContext.Provider value = {value}>
        <div>
            <div className = "form">
                {children[0]}
            </div>
            
            <div className = "table">
                {children[1]}
            </div>
        </div>
    </SearchPageContext.Provider>
  );
};

В ваших дочерних компонентах (например, в форме внутри MyPage) вы теперь можете использовать хук useSearchPage для доступа к handleSubmit и любым другим данным или методам, которые вы предоставили.

const MyPage = () => {
const { handleSubmit } = useSearchPage(); // Use the custom hook to access context

return (
    <SearchPage title = "Search for fruits">
        <form onSubmit = {handleSubmit}>
            <input placeholder = "Search..." />
            {/* other form elements */}
        </form>
        
        <table>
            {/* table contents */}
        </table>
    </SearchPage>
 );
};