Question

<Parent><!-- has an internal prop 'json', is set from a fetch request -->
  <div>
    <div>
       <Child /><!-- how can I send 'json here? -->

我必须使用React上下文吗？我觉得很混乱。在编写了这样的组件并回顾了代码之后，我感到很困惑https://reactjs.org/docs/context.html

Answer 1

https://codesandbox.io/embed/bold-bardeen-4n66r?fontsize=14

看看代码，上下文不是必需的，您可以将数据提升到父组件，仅在其中进行更新和共享。

Answer 2

据我所知，有3或4种选择：

1）使用您所说的上下文，因此声明一个提供程序，然后在需要它的组件上使用gcc test.c -I/usr/local/include -o test对其进行使用。它可能会降低组件的可重用性，

2）子孙组件之间的举升状态和道具

useContext()

3）使用孩子：

const App = (props: any) => {
// Do some stuff here
return <Parent myProp={props.myProp}></Parent>;
};

const Parent = ({ myProp }: any) => {
return (
    <div>
    <Child myProp={myProp}></Child>
    </div>
);
};

const Child = ({ myProp }: any) => {
return (
    <div>
    <GrandChild myProp={myProp}></GrandChild>{" "}
    </div>
);
};

const GrandChild = ({ myProp }: any) => {
return <div>The child using myProp</div>;
};

export default App;

4）将GrandChild本身作为道具传递给父级，将其提升到适当的子级并在那里渲染。它实际上是前两种选择的组合。

Answer 3

这是一个简单的示例，其中您通过道具将响应发送给孩子。我使用了一些示例（api）进行了演示。

------------------------父组件--------------------- ---

import React, { Component } from "react";
import Axios from "axios";
import Child from "./Child";

let clicked = false;
class App extends Component {
  state = {
    parentResponse: ""
  };
  fetchAPI = () => {
    Axios.get("https://jsonplaceholder.typicode.com/todos/1")
      .then(res => {
        if (res && res.data) {
          console.log("Res data: ", res.data);
          this.setState({ parentResponse: res.data });
        }
      })
      .catch(err => {
        console.log("Failed to fetch response.");
      });
  };
  componentDidMount() {
    this.fetchAPI();
  }
  render() {
    return (
      <div>
        <Child parentResponse={this.state.parentResponse} />
      </div>
    );
  }
}

export default App;

------------------------子组件--------------------- ---

import React, { Component } from "react";

class Child extends Component {
  state = {};
  render() {
    return (
      <div>
        {this.props.parentResponse !== "" ? (
          <div>{this.props.parentResponse.title}</div>
        ) : (
          <div />
        )}
      </div>
    );
  }
}

export default Child;

React父子对子的内部传递

3 个答案: