我正在创建自己的自定义选项卡组件。它由一个选项卡标题组成，每个选项卡标题都有一个正文部分。单击选项卡标题时，应将相应主体的样式设置为 display:block，将所有其他样式设置为 display:none。
由于某些原因，我收到此错误:
Cannot assign to read only property 'style' of object
我知道我不能手动更改样式属性，因为它似乎是只读的，但我该如何解决/解决这个问题？
这是我的代码:
Tabs.js
import React, { Component } from 'react';
class Tabs extends Component {
constructor() {
super();
this.state = {
activeIndex: 0,
};
this.tabHeads = [];
}
// Initial composition of tab heads
componentWillMount() {
React.Children.map(this.props.children, (el, i) => {
const tab = el;
const key = `tabKey${i}`;
this.tabHeads.push((
<div role="button" onClick={e => this.onTabClick(e, i)} key={key}>{tab.props.title}</div>
));
});
}
// Called when user clicks a tab head
onTabClick(e, i) {
this.setState({ activeIndex: i });
}
render() {
// Set display none or block for each tab
React.Children.map(this.props.children, (el, i) => {
const tab = el;
let visibility = 'none';
if (i === this.state.activeIndex) visibility = 'block';
const newStyle = Object.assign({}, tab.props.style, { display: visibility });
tab.props.style = newStyle;
});
return (
<div style={this.props.style}>
{this.tabHeads}
{this.props.children}
</div>
);
}
}
export default Tabs;
用法是这样的:
render() {
const tabStyles = [
{ padding: '20px' }, // Tab 0
{ padding: '20px' }, // Tab 1
];
<Tabs>
<Tab style={tabStyles[0]} title="Tab1">
<div>Content 1</div>
</Tab>
<Tab style={tabStyles[1]} title="Tab2">
<div>Content 2</div>
</Tab>
</Tabs>
}
最佳答案
您尝试更改此行中的属性值:
tab.props.style = newStyle;
但是 React 中的 props 是只读的，你不能手动更改它们的值。请查看 React docs了解更多详情。
要修复它，您可以使用 React.cloneElement它允许克隆具有将合并到现有属性中的新属性的元素:
render() {
let childrenWithNewProps = React.Children.map(this.props.children, (el, i) => {
let visibility = 'none';
if (i === this.state.activeIndex) visibility = 'block';
return React.cloneElement(el, {
style: {
display: visibility
}
}
)
});
return (
<div style={this.props.style}>
{this.tabHeads}
{childrenWithNewProps}
</div>
);
}
关于javascript - 如何在此 React 组件中修复“对象的 "Cannot assign to read only property ' 样式”？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44186498/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解