使用一个大的React组件有什么缺点？
我有使用webpack,browserify,AngularJS,ES6,NPM和其他类似Web框架的丰富经验.我是React的新手.
我想在React中创建一个单页面应用程序.我不想要或不需要测试.我不需要团队朋友来工作.我只需要尽可能快地进行产品开发.让事情有效.你可以称之为MVP.您可以将其命名为lessm或smart developpement.如果将来工作顺利,我可以考虑重构项目.我是唯一一个开展工作的开发人员.我不担心性能问题(如果只有几毫秒)
问题是:所有文章都说要尽可能多地制作许多小型的React组件.在单独的文件中.你可以看到React-Starter-Kit.这是巨大的.
您可以看到每个组件都是一个单独的文件.有一个巨大的webpack.config.js文件.每个组件都导入许多其他东西.如果我也想要Redux,我需要导入商店,并connect在每个组件上制作.我想采取不同的方法.我想使用React和Redux.但只使用一个组件.每个内部元素都可以调度或执行事件.
我想不出将来有什么问题吗？
HTML:
<html><head><body></body></html>
JavaScript的:
App=React.createClass(function(){
getInitialState:function(){
return {
openMore:'block'
}
},
openMore:function(){
this.setState({openMore:'visible'})
},
render:function(){
return (
<div>
I want to put all the HTML of the app
<span>
In one component that do everything.
<button onClick={this.openMore}>More Info</button>
<span> This way I beleive I will need to type less for development</span>
<b style={{display:this.getState().openMore}}>What are the disadvance of this?</b>
</span>
</div>
)
}
})
ReactDOM.render(App,document.getElementsByTagName('body')[0])
我正在开发本机应用程序，并为显示列表项创建了一个通用组件。
<View style={styles.container}>
<ItemsWithSeparator style={styles.itemsContainer}>
<AppRow />
<AppRow />
</ItemsWithSeparator>
</View>
现在，我的ItemListSeparator只是遍历子项并呈现列表，所以我认为我应该使它成为无状态组件。
const ItemsWithSeparator = function ({children,style}) {
const childrenList = [];
const length = React.Children.count(children);
React.Children.forEach(
children,
(child,ii) => {
childrenList.push(child);
if (ii !== length -1) {
childrenList.push(
<View
key={`separator-${ii}`}
style={[styles.separator]}
/>
);
}
}
);
return (
<View style={style}>
{children}
</View>
);
};
但这会引发错误，提示未找到“反应”。
但是，它可以与基于类的组件一起很好地工作。以下是运行良好的代码。
class ItemsWithSeparator extends React.Component {
render () {
const {children,style} = this.props;
const childrenList = [];
const length = React.Children.count(children);
React.Children.forEach(
children,
(child,ii) …我有一个以下抽象类
class Manufacturer(models.Model):
company=models.CharField(max_length=255)
class Meta:
abstract = True
现在有 2 个类继承自上面：-
class Car(Manufacturer):
name = models.CharField(max_length=128)
class Bike(Manufacturer):
name = models.CharField(max_length=128)
现在我想将它们与功能链接起来，所以我创建了以下类：-
class Feature(models.Model):
name= models.CharField(max_length=255)
limit=models.Q(model = 'car') | models.Q(model = 'bike')
features = models.ManyToManyField(ContentType, through='Mapping',limit_choices_to=limit)
class Mapping(models.Model):
category=models.ForeignKey(Category, null=True, blank=True)
limit=models.Q(model = 'car') | models.Q(model = 'bike')
content = models.ForeignKey(ContentType, on_delete=models.CASCADE,limit_choices_to=limit,default='')
object_id = models.PositiveIntegerField(default=1)
contentObject = GenericForeignKey('content', 'object_id')
class Meta:
unique_together = (('category', 'content','object_id'),)
db_table = 'wl_categorycars'
但是当我尝试在 shell 命令中创建实例时，在创建映射实例时出现错误
“Mapping.content”必须是“ContentType”实例。
car1=Car(company="ducati",name="newcar")
bike1=Bike(company="bike",name="newbike")
cat1=Category(name="speed")
mapping(category=cat1, content=car1) # …我正在尝试为使用React和Bootstrap的元素之一创建弹出窗口。
以下是我的React代码：-
class Share extends React.Component{
render(){
return(
<div>hello</div>
);
}
}
var shareRenderFunc=function() {
ReactDOM.render(
<Share/> , document.getElementById('shareContainer')
);
}
以下是我的名为shareRenderFunc（）的 jquery ：
var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]',
content: function(){
window.shareRenderFunc();
return $('#shareContainer').html();
}
}
$('body').popover(popOverSettings);
以下是我的HTML包含popover元素：-
<div className="like-share icons-gray-black">
<a href=""><span><i className="fa fa-heart" aria-hidden="true"></i></span></a>
<a><span><i className="share-social fa fa-share-alt" rel="popover" aria-hidden="true"></i></span></a>
</div>
但是在控制台中，我收到TypeError提示shareRenderFunc不是函数
PS：reactjs文件是在jquery文件之前加载的，因此调用的功能已经存在，我尝试通过创建另一个javascript文件并调用其中存在的功能来尝试相同的功能，并且看起来工作正常。