正文 

当前位置： 首页 > 知识 >

React 15.1.0，将整个状态从父级传递给子级

     2023-02-21     192

关键词：

【中文标题】React 15.1.0，将整个状态从父级传递给子级【英文标题】：React 15.1.0, Pass entire state from parent to child 【发布时间】：2016-09-26 18:57:29 【问题描述】：

我正在使用 React 15.1.0。

假设有父“P”组件，它包含一个子组件“C”。

在旧版本的 react 中，当我想将整个状态传递给 child 时，我们使用 ...this.state 然后我们使用来自 child 的 this.props.something组件。

最新的最新 React 15.1.0 中是否有针对上述实例的简单方法？

注意：我需要传递整个状态而不是单个道具。

 <div>
    React.cloneElement(this.props.children,  title: this.state.title )
 </div>

我期待的是如下所示；

 <div>
    React.cloneElement(this.props.children, ...this.state)
 </div>

在父组件中，我有以下代码；

var App = React.createClass(
    getInitialState() 
        return
            status: 'disconnected',
            title: 'Hello World'
        
    ,
    render() 
        return(
            <div>
                <Header title=this.state.title />
                <div>
                    React.cloneElement(this.props.children, this.state)
                </div>
            </div>
        );
    
);

在子组件中，我正在尝试使用以下代码。

var Speaker = React.createClass(
    render() 
        return (
            <h1>Speaker: this.state.title</h1>
        );
    
);

但在 Chrome 浏览器中，我得到以下结果；

【问题讨论】：

我不明白这个问题.. ...this.state 有什么问题？ 它在最新的 React 版本中不起作用。 它适用于我webpackbin.com/Nk_ES2MQW 所以.. 在你上面的例子中（不使用 JSX）这不是一个特定的反应语法。你需要 stage-2 rest/spread 属性 babel 预设 它与 React 无关，它是 ES6 特性。 你就不能React.cloneElement(this.props.children, this.state)吗？ 【参考方案1】： 
...this.state

等于

this.state

在这种情况下。 ES6 中的扩展运算符（不是 React 特有的功能）... 将一个对象的属性扩展为父对象，请参阅：

let sampleObject = 
  name: 'a_name'
;

console.log('Non-spread', sampleObject);  // Non-spread name: "a_name"
console.log('Spread', ... sampleObject);  // Spread name: "a_name"

【讨论】：

【参考方案2】：

我只是改了下面的代码sn-p，

Speaker: this.props.title

在子组件中，瞧！！！代码有效。谢谢大家。

下面是截图。

【讨论】：

在 React 中将数据从父级传递给子级

】在React中将数据从父级传递给子级【英文标题】：PassingDatafromParenttoChildInReact【发布时间】：2021-08-2603:58:03【问题描述】：我正在测试是否可以将数据从父App.js传递到名为Contact的子组件。我想在点击按钮时传递数据。这里是App.... 查看详情

React-Router-Dom v5.2 ，无法从父级收到的道具中将道具传递给子组件

】React-Router-Domv5.2，无法从父级收到的道具中将道具传递给子组件【英文标题】：React-Router-Domv5.2,unabletopasspropstoachildcomponentfromproprecievedbyparent【发布时间】：2020-10-2407:01:53【问题描述】：我在reactv16.13.1项目中使用react-router-domv5.2... 查看详情

如何通过事件将数据从父级传递给子级

】如何通过事件将数据从父级传递给子级【英文标题】：Howtopassdatafromparenttochildangularthroughanevent【发布时间】：2019-03-1519:26:44【问题描述】：我需要在Angular上将数据从父级传递给子级。我有一个标签组。<mat-tab-group><mat-tab... 查看详情

使用 XLPagerTabStrip 将数据从父级传递给子级

】使用XLPagerTabStrip将数据从父级传递给子级【英文标题】：PassdatafromparenttochildrenusingXLPagerTabStrip【发布时间】：2017-05-0216:03:26【问题描述】：我的问题是：我有一个viewControllersA和B。我使用segue从A转到B。viewControllerB有两个孩子（... 查看详情

Vue 组件：如何将数据从父级传递给子级

】Vue组件：如何将数据从父级传递给子级【英文标题】：VueComponent:howtopassdatafromparenttochild【发布时间】：2017-06-2412:21:24【问题描述】：如何从我的医生组件中访问医生属性？Vue.component(\'specialists\',template:`<div><divclass="list-g... 查看详情

htmlvue.js道具将数据从父级传递给子级(代码片段)

查看详情

React：将状态传递给子组件

】React：将状态传递给子组件【英文标题】：React:Passingstatetochildcomponent【发布时间】：2022-01-1804:00:37【问题描述】：我正在处理一个前端导师项目，我正在尝试将悬停状态从父组件(App)传递到子组件(Listing)。您可以看到我在App组... 查看详情

在 useEffect() 钩子中从父级传递的子级调用函数，React

...115:58:51【问题描述】：我在父组件中定义了一个更新本地状态并将其传递给子组件的函数。在子组件中，我想在每次magLockDropdown依赖值更改时调用useEffect挂钩中的函数。尝试执行此操 查看详情

Vue.js 将表单数据（v-model）值从父级传递给子级？

】Vue.js将表单数据（v-model）值从父级传递给子级？【英文标题】：Vue.jspassformdata(v-model)valuesfromParenttoChild?【发布时间】：2021-05-2122:04:51【问题描述】：我有一个使用vue.js的两个组件表单，其中父表单启动多步流程并使用v-model收... 查看详情

在VueJS 2中通过v-for中的道具将数据从父级传递给子级

】在VueJS2中通过v-for中的道具将数据从父级传递给子级【英文标题】：Passingdatafromparenttochildviapropsinv-forinVueJS2【发布时间】：2019-12-1621:33:50【问题描述】：我遇到了类似的问题，但找不到答案，而且没有一个对我有用。Vuejsv-forPas... 查看详情

React：将图像从父组件中的 this.state 传递给子组件

】React：将图像从父组件中的this.state传递给子组件【英文标题】：React:Passimagefromthis.stateinparentcomponenttochildcomponent【发布时间】：2020-04-2111:35:39【问题描述】：我有一个图像我已经导入到React类组件中，如下所示：importHat3from\'./as... 查看详情

如何在Vue2中将数据从父级传递给子级

】如何在Vue2中将数据从父级传递给子级【英文标题】：HowtopassdatafromparenttochildinVue2【发布时间】：2017-11-0711:25:33【问题描述】：所以我有以下4个组件卡片列表组件Vue.component(\'card-list\',template:`<div><cardv-for="taskintasks">task.... 查看详情

react redux typescript：无法将继承的道具从父级传递到类容器

】reactreduxtypescript：无法将继承的道具从父级传递到类容器【英文标题】：reactreduxtypescript:cannotpassinheritedpropsfromparenttoclasscontainer【发布时间】：2018-11-3002:57:18【问题描述】：代码我定义了组件类并连接如下：exportclassSkypeConversati... 查看详情

在 ReactJs 中，从 redux 存储或从父级到子级将 props 传递给子组件的最佳实践是啥？

】在ReactJs中，从redux存储或从父级到子级将props传递给子组件的最佳实践是啥？【英文标题】：WhatisthebestpracticeforpassingpropstochildcomponentinReactJs,fromthereduxstoreorfromparenttochild?在ReactJs中，从redux存储或从父级到子级将props传递给子组... 查看详情

将对象从子状态传递给父状态

】将对象从子状态传递给父状态【英文标题】：Passingobjecttoparentstatefromchild【发布时间】：2019-10-2718:59:07【问题描述】：有什么方法可以将对象从子组件推送到父道具？【问题讨论】：HowtopassdatafromchildcomponenttoitsparentinReactJS?的可... 查看详情

useState 从父级传递给子级并在子级中使用不会触发子级的重新渲染

】useState从父级传递给子级并在子级中使用不会触发子级的重新渲染【英文标题】：useStatepassedfromparenttochildandusedinchilddoesn\'ttriggerthere-renderofthechild【发布时间】：2021-03-0805:37:40【问题描述】：所以，我猜想当useState更新时，父组... 查看详情

将异步结果从父组件传递给子组件反应功能组件

...数据通过useState挂钩设置并传递给子组件“TaskResultBox”。状态不会改变，值也不会呈现到子组件中。我已经使用 查看详情

React，将在父级创建的引用传递给子级

】React，将在父级创建的引用传递给子级【英文标题】：React,passareferencecreatedattheparenttothechildren【发布时间】：2020-12-1919:21:54【问题描述】：我正在重构我的代码，并且我在父级中有一些逻辑，需要评估其子级所具有的所有输入... 查看详情