альтернативный способ передачи значения состояния контейнера, в котором <FORM />, отображается в настраиваемых полях формы (кроме formcontext)

Question

Есть ли способ передать значение состояния контейнера, в котором отображается, в настраиваемые поля формы (нужен способ, отличный от formcontext).

class Example extends react.component{
   constructor(props){super(props);this.state={"some stuff"}
}
render(){
return(<Form
"somestuff"
formcontext={this.state}
/>)
}
}

Answer 1

Вы можете использовать React.Context

Попробуйте следующий код:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const FormContext = React.createContext("FormContext");

function Form(props) {
  console.log(props);
  return <form />;
}

class SomethingElse extends React.Component {
  static contextType = FormContext;
  render() {
    return <Form values={this.context} />;
  }
}

const SomethingInTheMiddle = props => {
  return <SomethingElse />;
};

class Example extends React.Component {
  state = {
    a: 1,
    b: 2,
    c: 3
  };
  render() {
    return (
      <FormContext.Provider value={this.state}>
        <SomethingInTheMiddle />
      </FormContext.Provider>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Example />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Проверьте больше: https://reactjs.org/docs/context.html