我在布局中有一个子组件，我也想传递一个 Prop 值。但我不知道怎么办。在下面的类中，layoutFileDataRequest() 在单击事件时从子组件接收字符串变量。需要将该值发送到 this.props.children 组件之一，以便它可以更新。
我该怎么做？在下面的代码中 React.cloneElement(child, { 不会改变它总是保持不变，这意味着我无法更新 child 属性。
export default class Layout extends React.Component {
constructor(props) {
super(props)
this.layoutFileDataRequest = this.layoutFileDataRequest.bind(this);
this.state = {
newData: '',
returnData: 'test',
}
}
/**
* Received request from server add it to
* react component so that it can be rendered
*/
layoutFileDataRequest(data) {
this.setState({ returnData:data })
}
renderChildren() {
return React.Children.map(this.props.children, child => {
console.log(this.state.returnData);
return React.cloneElement(child, {
data: this.state.returnData
})
});
}
/**
* Render request
*
*
*/
render() {
const { location } = this.props;
const title = this.state.newData;
return (
<div id="app-container" class={title}>
<Nav location={location} />
<main id="main">
<h1>{title}</h1>
<section>
{this.renderChildren()}
</section>
</main>
<Project layoutFileDataRequest={this.layoutFileDataRequest} />
<Footer />
</div>
);
}
}
export default class Project extends React.Component {
constructor(props) {
super(props)
this.projectFileDataRequest = this.projectFileDataRequest.bind(this);
this.state = {
newData: [],
}
}
/**
* Received request from server add it to
* react component so that it can be rendered
*/
projectFileDataRequest(data) {
this.props.layoutFileDataRequest(data);
}
/**
* Received request from server add it to
* react component so that it can be rendered
*/
componentDidMount() {
ApiCalls.readSassDirData()
.then(function (serverData) {
this.setState({ newData: serverData[0].data })
}.bind(this));
}
/**
* Render request
*/
render() {
const listOfObjects = this.state.newData;
return (
<aside id="project">
<h2>Files</h2>
<FileListing listOfObjects={listOfObjects} projectFileDataRequest={this.projectFileDataRequest} />,
</aside>
);
}
}
最佳答案
我认为错误出在 renderChildren 函数中。
代码
renderChildren() {
return React.Children.map(this.props.children, child => {
console.log(this.state.returnData);
return React.cloneElement(child, {
data: this.state.returnData
})
});
}
新代码
renderChildren(){
return this.props.children.map(child =>
React.cloneElement(child, {
data: {...this.state.returnData }
})
);
}
关于javascript - 在 react 中将值传递给子组件(this.props.children)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50073052/
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案 如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的
我正在尝试使用以下代码通过将ffmpeg实用程序作为子进程运行并获取其输出并解析它来确定视频分辨率:IO.popen'ffmpeg-i'+path_to_filedo|ffmpegIO|#myparsegoeshereend...但是ffmpeg输出仍然连接到标准输出并且ffmepgIO.readlines是空的。ffmpeg实用程序是否需要一些特殊处理？或者还有其他方法可以获得ffmpeg输出吗？我在WinXP和FedoraLinux下测试了这段代码-结果是一样的。 最佳答案 要跟进mouviciel的评论，您需要使用类似pope
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
在Ruby(尤其是Rails)中，您经常需要检查某物是否存在，然后对其执行操作，例如:if@objects.any?puts"Wehavetheseobjects:"@objects.each{|o|puts"hello:#{o}"end这是最短的，一切都很好，但是如果你有@objects.some_association.something.hit_database.process而不是@objects呢？我将不得不在if表达式中重复两次，如果我不知道实现细节并且方法调用很昂贵怎么办？显而易见的选择是创建一个变量，然后测试它，然后处理它，但是你必须想出一个变量名(呃)，它也会在内存中
问题1:我无法通过以下方式找到将负整数转换为二进制的方法。我应该像这样转换它。-3=>"11111111111111111111111111111101"我在下面试过:sprintf('%b',-3)=>"..101"#..appearsanddoesnotshow111111bit.-3.to_s(2)=>"-11"#Thisjustadds-tothebinaryofthepositiveinteger3.问题2:有趣的是，如果我使用在线转换器，它告诉我-3的二进制是“0010110100110011”。"11111111111111111111111111111101"和"001
我遇到了一个非常困难的时期:#containedwithin:"MA\u008EEIKIAI"#shouldbe"MAŽEIKIAI"#natureofstring$pstring3"MA\u008EEIKIAI"$putsstring3MAEIKIAI$string3.inspect"\"MA\\u008EEIKIAI\""$string3.bytes#关于从哪里开始的任何想法？注意:这不是我的previousquestion的副本. 最佳答案 \u008E表示代码点为8e(十六进制)的unicode字符出现在字符串中的那个位置。
在尝试实现应用auto_orient的过程之后!对于我的图片，我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常，但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|
我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_
我怎样才能使下面的代码工作，以便两个puts都显示1？video=[]name="video"name[0]=1putsname[0]#givesme1putsvideo[0]#givesmenil 最佳答案 您可以使用eval使其工作:eval"#{name}[0]=1"不过我强烈反对这样做。在大多数情况下，你认为你需要做类似的事情，你应该使用HashMap。喜欢:context={"video"=>[]}name="video"context[name][0]=1 关于ruby-如何