reactjs - 传递容器状态值的替代方法，其中呈现到表单的自定义字段（除了formcontext）

Question

有什么方法可以将渲染的容器的状态值传递给表单的自定义字段（需要除formcontext之外的其他方式）。

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

标签： reactjsreact-redux

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