Reactjs 反应将父级的内部道具转移到子级_Reactjs_Jsx

Reactjs 反应将父级的内部道具转移到子级

reactjs

Reactjs 反应将父级的内部道具转移到子级,reactjs,jsx,Reactjs,Jsx,我必须使用反应上下文吗？我觉得很困惑。在编写了这样一个组件并回顾代码之后，我感到困惑看一看代码，上下文并不是必需的，您可以将数据提升到父组件，更新数据并仅从那里共享数据。看一看代码，上下文不是必需的。您可以将数据提升到父组件，更新数据并仅从父组件共享数据。据我所知，有3或4种备选方案： 1）正如您所说的使用上下文，声明一个提供者，然后在需要它的组件处使用useContext（）。它可能会降低组件的可重用性 2）提升状态和支柱，在子体组件之间 <Parent><!-- h

我必须使用反应上下文吗？我觉得很困惑。在编写了这样一个组件并回顾代码之后，我感到困惑

看一看代码，上下文并不是必需的，您可以将数据提升到父组件，更新数据并仅从那里共享数据。

看一看代码，上下文不是必需的。您可以将数据提升到父组件，更新数据并仅从父组件共享数据。

据我所知，有3或4种备选方案：

1）正如您所说的使用上下文，声明一个提供者，然后在需要它的组件处使用

useContext（）

。它可能会降低组件的可重用性

2）提升状态和支柱，在子体组件之间

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

const-App=（道具：任意）=>{
//在这里做些事情
返回；
};
const Parent=（{myProp}:any）=>{
返回(
);
};
常量Child=（{myProp}:any）=>{
返回(
{" "}
);
};
常量孙子=（{myProp}:any）=>{
使用myProp返回孩子；
};
导出默认应用程序；

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;

const-App=（道具：任意）=>{
//在这里做些事情
返回(
);
};
const Parent=（道具：任意）=>{
返回(
{props.children}
);
};
const Child=（道具：任意）=>{
返回{props.children}；
};
常量孙子=（{myProp}:any）=>{
使用myProp返回孩子；
};

4）将孙子本身作为道具传递到父对象中，将其提升到适当的子对象并在那里渲染。实际上，它是前两种备选方案的组合。

据我所知，有3或4种备选方案：

1）正如您所说的使用上下文，声明一个提供者，然后在需要它的组件处使用

useContext（）

。它可能会降低组件的可重用性

2）提升状态和支柱，在子体组件之间

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

const-App=（道具：任意）=>{
//在这里做些事情
返回；
};
const Parent=（{myProp}:any）=>{
返回(
);
};
常量Child=（{myProp}:any）=>{
返回(
{" "}
);
};
常量孙子=（{myProp}:any）=>{
使用myProp返回孩子；
};
导出默认应用程序；

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;

const-App=（道具：任意）=>{
//在这里做些事情
返回(
);
};
const Parent=（道具：任意）=>{
返回(
{props.children}
);
};
const Child=（道具：任意）=>{
返回{props.children}；
};
常量孙子=（{myProp}:any）=>{
使用myProp返回孩子；
};

4）将孙子本身作为道具传递到父对象中，将其提升到适当的子对象并在那里渲染。这实际上是前两种选择的混合。

这是一个简单的示例，您可以通过道具将响应发送给孩子。我使用了一些示例（）来演示它

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

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

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

const Child = (props: any) => {
return <div>{props.children}</div>;
};

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

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}来自“React”；
从“Axios”导入Axios；
从“/Child”导入子项；
let=false；
类应用程序扩展组件{
状态={
家长回应：“
};
fetchAPI=（）=>{
Axios.get（“https://jsonplaceholder.typicode.com/todos/1")
。然后（res=>{
if（res&&res.data）{
日志（“Res数据：”，Res.data）；
this.setState（{parentResponse:res.data}）；
}
})
.catch（错误=>{
log（“获取响应失败”）；
});
};
componentDidMount（）{
this.fetchAPI（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

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

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

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

const Child = (props: any) => {
return <div>{props.children}</div>;
};

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

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}来自“React”；
类子扩展组件{
状态={}；
render（）{
返回(
{this.props.parentResponse！==“”(
{this.props.parentResponse.title}
) : (
)}
);
}
}
导出默认子对象；

这是一个简单的示例，您可以通过道具将响应发送给孩子。我使用了一些示例（）来演示它

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

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

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

const Child = (props: any) => {
return <div>{props.children}</div>;
};

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

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}来自“React”；
从“Axios”导入Axios；
从“/Child”导入子项；
let=false；
类应用程序扩展组件{
状态={
家长回应：“
};
fetchAPI=（）=>{
Axios.get（“https://jsonplaceholder.typicode.com/todos/1")
。然后（res=>{
if（res&&res.data）{
日志（“Res数据：”，Res.data）；
this.setState（{parentResponse:res.data}）；
}
})
.catch（错误=>{
log（“获取响应失败”）；
});
};
componentDidMount（）{
this.fetchAPI（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

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

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

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

const Child = (props: any) => {
return <div>{props.children}</div>;
};

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

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}来自“React”；
类子扩展组件{
状态={}；
render（）{
返回(
{this.props.parentResponse！==“”(
{this.props.parentResponse.title}
) : (
)}
);
}
}
导出默认子对象；

你说的“内部道具”是什么意思？请展示它是如何设置的。你说的“内部道具”是什么意思？请展示它是如何设置的。我喜欢这个，因为它非常直截了当，易于阅读，适合我的特殊情况，但我认为如果你开始在树的深处有很多不同的子级，那么你必须从每个父级传递道具，它会变成一个无法维护的混乱，然后像我之前链接的那样反应上下文，我认为更好。所以我将接受这个答案，但人们请考虑到这一点。它可能不适合你的特殊需要！是的，如果我们有这么多的层次结构，那么最好使用上下文。我喜欢这个，因为它非常直接，易于阅读，并且适合我的pa