- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我现在正在做一个宠物项目,我决定使用 React 作为 View 。我对它的开发还很远,但我刚刚开始意识到我可能不明白如何很好地使用 React,因为似乎为了做简单的事情,你必须采取一些非常极端的措施!
所以,是时候举一个任意的例子了!这是适用于 JsFiddle 的代码
var Name = React.createClass({
render: function() {
return <button onClick={this.props.onClick.bind(null, this.props.id, 'John')}>{this.props.value}</button>
}
});
var NameContainer = React.createClass({
getInitialState: function() {
return {
names: [
{ id: 1, name: 'Fred' },
{ id: 2, name: 'George' }
]
};
},
handleClick: function(id, newName) {
names = this.state.names;
names.map(function(obj){
if (obj.id === id) {
obj.name = newName;
}
return obj;
});
this.setState({
names: names
});
},
render: function() {
var handleClick = this.handleClick;
var children = this.state.names.map(function(obj){
return <Name key={obj.id} id={obj.id} value={obj.name} onClick={handleClick} />;
});
return (
<div>
{children}
</div>
);
}
});
最佳答案
我认为,您的示例存在一些问题,使其变得过于复杂:Name 组件是一个有漏洞的抽象,而 Name 组件知道的太多了。 (这些实际上有点交织在一起。)
在解决这些问题之前,我想绕道而行,讨论一下我设计组件的方法。我发现混合自顶向下和自底向上的方法在构建 React 应用程序时非常有用。使用自上而下帮助您确定要构建的组件,方法是从组件的概念开始,确定其子组件应该是什么,然后确定子组件的子组件,令人作呕。在确定组件之后,是时候切换到自下而上的方法了,在这种方法中,您采用最基本的组件(无需新的子组件来构建它)并尽可能自包含和独立地构建它,然后选择下一个最基本组件并实现它,并重复直到完成。
在实现组件时,您可以将传入的 props 视为供其他组件使用的 API,并且您希望使其尽可能专注于您的组件应提供的功能。
所以回到你的例子中的问题。
首先是你的 Name 组件是一个有漏洞的抽象。 (是的,我知道这只是一个随意的例子,但请耐心等待。)该组件将 onClick 作为其 API 的一部分(因为它需要作为 Prop )。这是有问题的,因为它告诉想要使用它的组件,“嘿,我这里有一个按钮!”这对您当前的 Name 实现没问题,但是当您需要更改 Name 以具有其他行为时会发生什么? onClick 可能不再有意义,如果您想更改该 Prop 名称,那么该更改会影响您的其余代码。相反,您可能会考虑使用名称“更新”,这对于 Name 组件来说似乎是一个合理的操作,同时隐藏了它内部包含按钮的事实。当然,这可以看作是“命名事物时要小心”的论点,但我认为良好的命名是构建易于使用且以后易于修改的组件的宝贵工具。
另一个问题是 Name 组件对父实现了解太多,导致以后很难在其他组件中使用。不是在 Name 组件中运行“bind”,让我们假设拥有的容器传递一个带有单个参数的函数 - newName。在 name 组件中,您只需要使用您想要的新名称调用该函数。 Name 不关心这如何影响任何其他状态,并且您已经有效地推迟了解决该问题,直到您别无选择。 Name 组件看起来像:
var Name = React.createClass({
render: function() {
return <button onClick={() => this.props.update('John')}>{this.props.name}</button>;
}
});
var NameContainer = React.createClass({
getInitialState: function() {
return {
names: [
{ id: 1, name: 'Fred' },
{ id: 2, name: 'George' }
]
};
},
update: function(obj, newName) {
obj.name = newName;
this.setState({ names: this.state.names });
},
render: function() {
var children = this.state.names.map(function(obj){
return <Name key={obj.id} name={obj.name} update={this.update.bind(null, obj)} />;
}, this);
return (
<div>
{children}
</div>
);
}
});
关于javascript - 使用适当的状态/ Prop react 自修改组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30817269/
我有以下字符串到 json 代码: json = new JSONObject( "{\"Questions\":{"
我在 C++ 中有一个包含 20 个整数的数组,我想打乱它们(随机顺序)。 我还想以这样的方式对它们进行排序,即前 10 个数字按升序排列最小,其余的只是随机的。 有没有办法自动执行此操作? 最佳答案
我正在尝试在 Java 上实现 Fisher-Yates 洗牌算法。它可以工作,但是当我的 ArrayList 的大小大于 100000 时,它会变得非常慢。我将向您展示我的代码,您是否看到任何优化代
有问题的代码: random_items = random.shuffle(Item.query.all())[20:30] 它在 Flask/SQLAlchemy 应用程序中。Item 是模型。
我目前正在尝试找到一种方法来按行随机化数据框中的项目。我在 pandas ( shuffling/permutating a DataFrame in pandas ) 中发现了这个关于 shuffl
在 pandas 中按行或按列对数据帧进行洗牌的简单而有效的方法是什么? IE。如何编写函数shuffle(df, n, axis=0)这需要一个数据帧,许多洗牌n , 和一个轴(axis=0 是行,
我刚开始接触 Objective-C,我正在尝试对数组进行排序,以使其差异尽可能小。 int main() { NSAutoreleasePool * pool = [[NSAutorelea
我正在使用此代码使用 Fisher-Yates 随机化算法的变体生成 vector 的随机排列(我从第一个元素到最后一个元素,而不是相反)。我在一个程序中全局使用 boost::random::mt1
哪些 SSE/AVX 指令将 channel 从 a 打乱为 b 和 c? float4 a = {data[0], data[1], data[2], data[3]}; float4 b = {d
15 个中!数字 1-15 的可能排列,我需要选择 10!他们是随机的。 不幸的是,虽然 this answer 中的方法如果我迭代前 10 个排列,可以避免存储所有排列并对其进行洗牌时遇到的内存不足
我是一名优秀的程序员,十分优秀!