- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有一个父组件,它有 1 个子组件。我通过 Prop 传递数据来更新我的 child 。最初,它工作正常,但是当我单击一个按钮并使用 setState 更新状态时,在 setState 完成时, child 将使用旧值呈现。我已经在 child 中使用 componentWillReceiveProps 解决了这个问题,但这是正确的方法吗?
在下面的代码中,如果我在 filterResults 函数中执行 setState,它不会更新 Emplist 组件。
import React, { Component } from 'react';
import {Search} from './search-bar'
import Emplist from './emplist'
class App extends Component {
constructor(props){
super(props);
this.emp=[{
name:'pawan',
age:12
},
{
name:'manish',
age : 11
}]
this.state={emp:this.emp};
this.filterResults=this.filterResults.bind(this);
}
filterResults(val)
{
if(this.state)
{
let filt=[];
filt.push(
this.emp.find(e=>{
return e.age==val
})
);
this.setState({emp:filt});
}
}
render() {
return (
<div className="App">
<Search filterResults={this.filterResults}/>
<Emplist emp={this.state.emp}/>
</div>
);
}
}
export default App;
EmpList Componet
import React,{Component} from 'react'
export default class Emp extends Component
{
constructor(props){
super(props);
this.emplist=this.props.emp.map(e=>{return <li>{e.name}</li>});
this.next=this.emplist;
}
componentWillReceiveProps(nextProps,nextState,prevProps,prevState,nextContext,prevContext){
// this.props.updated(this.props.empo);
this.next=nextProps.emp[0];
if(this.next)
this.emplist= nextProps.emp.map(e=>{return <li>{e.name}</li>});
}
render(){
if(!this.next)
return <div>name not found</div>
else
return (
<div>
<br/>
<p>The list is here</p>
<ul>
{this.emplist}
</ul>
</div>
)
}
}
最佳答案
如果你想从父级传递给子级,你可以使用 props 传递,如果你想做相反的事情,你可以将一个函数从父级传递给子级,然后使用这个传递的函数将一些东西发送回父级。
child 看起来像这样
class Reciepe extends Component{
render(){
const { title, img, instructions } = this.props;
const ingredients=this.props.ingredients.map((ing,index)=>(<li key={index} >{ing}</li>));
return (
<div className='recipe-card'>
<div className='recipe-card-img'> <img src={img} alt={title}/> </div>
<div className='recipe-card-content'>
<h3 className='recipe-title'>Reciepe {title}</h3>
<ul> {ingredients} </ul>
<h4>Instructions:</h4>
<p>{instructions}</p>
</div>
</div>
)
}
}
parent 看起来像这样
class RecipeList extends Component{
render(){
return (
<div style={{'display':'flex'}}>
{this.props.recipes.map((item,index)=>(
<Recipe key={index}
title={item.title}
ingredients={item.ingredients}
instructions={item.instructions}
img={item.img}
/>
))}
</div>
)
}
}
关于javascript - 如何在 react.js 中将数据从父级传递给子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47483868/
我有一个层次结构中的项目列表,我正在尝试将此列表解析为实际的对象层次结构。我正在使用modified pre-order tree traversal存储/迭代此列表,所以我拥有的是树的子集,包括所有
给定这个类: public class Parent { public Child[] Children {get;set;} } 还有这个数组: Parent[] parents; 如何使用 L
我面临着一些难以完成这个看似简单的任务。 我在一个嵌套块 (Suggest.phtml) 中,我想从父块 (result.phtml) 获取一个值(搜索结果的数量,以及集合计数) 我错了还是这里没有简
我在访问子模型重复器字段以在没有用户操作的情况下加载时遇到问题,我在父模型 Controller 中使用 RelationController这就是我在父 Controller 中所做的 class
我有一个 datetime 指令,其范围内包含两个属性:date 和 time。如何从父 Controller 访问这些属性?我尝试这样做 Start: End: You
我的父类是: public Class Parent { protected void foo() { bar(); } protected void
所以我知道如何中断列表的继承 (SPList.BreakRoleInheritance(true)),但是如何以编程方式从其父级重新继承? 谢谢 最佳答案 MSDN link . SPList.Res
最近我们将maven版本更改为3.5.4根据https://issues.apache.org/jira/browse/MNG-5940 Maven Super POM 中的 maven-source
我需要在单击页面背景(#page)时触发一个事件(例如隐藏 float 购物车),但在单击内部内容时不会发生此事件。所以我需要这个事件发生在空间:页面减去内容。我该如何实现它?谢谢 如果我有这个结构:
我在另一个 ajax 函数中有一个 ajax 函数 $.ajax({ url: '../...', type: 'POST',
我创建了两个类 - Building 和 Warehouse。 Warehouse 扩展 Building。我创建了 Building map (building_map),其中放置了 Buildin
我有一个获取和处理数据的 Activity ,我想启动一个新 Activity ,该 Activity 能够从父 Activity 访问一些变量(复杂数据结构)。 我不能在这里使用序列化,有没有一种简
在 HTML 中,我有两个函数,一个是仅带有警报的 abc,另一个是使用 window.open() 创建一个新窗口,并填充预定义的 HTML 字符串。我想从父 HTML 调用该函数。我尝试过调用pa
我一直在研究这个脚本并且一切正常,除了 $(this).parents(".clonedInput").clone()。按钮克隆引用放置在 .clonedInput div 中。 如果能帮助我从 cl
我有以下代码: 主要 HTML 文档 $(function(){ $("#i").load(function(){ var $iframeConten
html 的一部分结构如下。我想从中获得工作“标题”和“时间”。我可以单独获取它们,例如: from bs4 import BeautifulSoup pages = ' \
我正在尝试从父 div 中删除底部边框。我已经编写了以下 HTML 代码,但我认为我的方法不正确。看到这张图片 这是我的 HTML 代码 j
通常,我可以从 Activity 调用扩展 DialogFragment 并实现 DialogInterface.OnClickListener() 的对象。 然后,如果我想从那个 Dialog 调用
我花了好几个小时搜索如何从嵌套 Controller 更新服务值。 我的子 Controller 需要更新服务中的值。该值需要显示在父 Controller 中。 我做了一个jsfiddle,让它更清
我有一个包含一些数据的表格,表格中的每个元素都是一个 React 类组件。它看起来像这样: 我想要的只是有一个用于“选中所有”功能的复选框(左上角的复选框)。问题是我不知道如何解决这个问题,因为 pr
我是一名优秀的程序员,十分优秀!