- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我的问题和标题一样。
假设我编写了以下代码。
class TODOList extends Component {
render() {
const {todos, onClick} = this.props;
return (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
onClick={onClick}
{...todo}
/>
)}
</ul>
);
}
}
const mapStateToProps = (state) => {
return {
todos: state.todos
}
}
const mapDispatchToProps = (dispatch) => {
return {
onClick(data){
dispatch(complete(data))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TODOList);
现在,在最后一行之后,此代码将导出带有状态的 TODOList 组件作为 Prop 。这并不是说它包含状态,而是只是接收到状态并将它们作为“ Prop ”,就像方法名称“mapStateToProps”所解释的那样。
在 Dan Abramov 撰写的中篇文章 ( https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 ) 中,容器组件将数据作为状态处理,而展示属性作为 Prop 处理。它不是一个将数据作为 Prop 处理的展示组件吗?我坚持认为正确的容器应该是下面这样的容器。
class CommentList extends React.Component {
this.state = { comments: [] };
componentDidMount() {
fetchSomeComments(comments =>
this.setState({ comments: comments }));
}
render() {
return (
<ul>
{this.state.comments.map(c => (
<li>{c.body}—{c.author}</li>
))}
</ul>
);
}
}
当我尝试制作“有状态”(不按属性处理数据)容器组件时,我不确定为什么 react-redux 将 API 命名为“mapStateToProps”
最佳答案
首先这些指南不是圣经的一部分
您应该编写易于您和您的团队推理的代码。
我认为您遗漏了一些东西,redux 容器与 react 容器不同。
我的意思是,connect
将为您创建容器,这并不意味着包装的组件是一个容器。
基本上,您可以从同一个文件导出两个版本,容器(连接版本)和演示版本(非连接版本)。
另一件通常让人们失望的事情是 mapStateToProps
的函数和参数的名称。
我更喜欢 mapStoreToProps
中的名称
map the
redux
store to the component's props.
当我们处于 react
的上下文中时,名称 state
可能会造成混淆。
编辑
作为您评论的跟进:
I totally didn't know these two are actually different. Could you please tell me about more details
它们的不同之处在于 connect
为您创建“容器”的方式。
connect
是创建 Container Component 的高阶组件为我们提供所有订阅逻辑 + 函数,将商店和 Action 创建者的部分作为 Prop (mapStateToProps
和 mapDispatchToProps
)传递给它的 child 。
“普通”容器通常是指您手工编写的组件,它通常不处理事物的外观,而是处理应用程序的某些逻辑。
至于其他评论如
The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified
正如我上面提到的,这是部分正确的。它不仅仅是将属性注入(inject)我们的组件,它还订阅了商店,从 Provider
中获取它(通过 context
),它在做所有这些时都考虑到了优化,所以我们不必自己做。
I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library
我看到一些开发者误解了这一点,因为 react
有一个 state
而 redux
有一个 store
(至少在大多数教程和文档中都是这样调用它的)。
这可能会让一些刚接触 react
或 redux
的人感到困惑。
编辑2
It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?
我的意思是您编写的包装组件不一定是容器。
您可以连接一个“Presentation”组件:
const Link = ({ active, children, onClick }) => {
if (active) {
return <span>{children}</span>
}
return (
<a
href=""
onClick={e => {
e.preventDefault()
onClick()
}}
>
{children}
</a>
)
}
// ...
export default connect(mapState, mapDispatch)(Link)
关于javascript - 我无法理解为什么具有 'connect()' 的组件在 react 中是有状态的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53802181/
使用 caret::train() 运行逻辑回归模型时出现问题。LR = caret::train(Satisfaction ~., data= log_train, method = "glm",
我正在尝试将nginx容器作为我所有网站和Web服务的主要入口点。我设法将portainer作为容器运行,并且可以从互联网上访问它。现在,我正在尝试访问由另一个Nginx容器托管的静态网站,但这样做失
我有一个在 Windows XP SP3 x86 上运行的 Visual Studio 2008 C# .NET 3.5 应用程序。在我的应用程序中,我有一个事件处理程序 OnSendTask 可以同
我在 Eclipse 中创建了作为独立程序执行的此类,它可以毫无问题地连接所有 http URL(例如:http://stackoverflow.com),但是当我尝试连接到 https(例如 htt
我在我的 nginx 错误日志中收到大量以下错误: connect() failed (111: Connection refused) while connecting to upstream 我的
我正在尝试将新的 log4j2 与 Socket Appender 一起使用,但我有点不走运。这是我的 XML 配置文件:
我目前正在尝试寻找 Android 应用程序后端的替代方案。目前,我使用 php servlet 来查询 Mysql 数据库。数据库(Mysql)托管在我大学的计算机上,因此我无法更改任何配置,因为我
类MapperExtension有一些方法,before_insert, before_update, ...都有一个参数connection. def before_insert(self, map
嗨,我正在尝试更改位于连接库 (v 5.5) 中的文档的文档所有者,我仍在等待 IBM 的回复,但对我来说可能需要太长时间,这就是我尝试的原因逆向工程。 我尝试使用标准编辑器 POST 请求将编辑器更
我在 nginx( http://52.xx.xx.xx/ )上访问我的 IP 时遇到 502 网关错误,日志只是这样说: 2015/09/18 13:03:37 [error] 32636#0: *
我要实现 Connected-Component Labeling但我不确定我应该以 4-connected 还是 8-connected 的方式来做。我已经阅读了大约 3 种 Material ,但
我在Resources ->JMS ->Connection Factories下有两个连接工厂。 1) 连接工厂 2)集成连接工厂 我想修改两个连接工厂下连接池的最大连接数。资源 ->JMS ->连
我在将 mongoengine 合并到我的 django 应用程序时遇到问题。以下是我收到的错误: Traceback (most recent call last): File "/home/d
上下文 我正在关注 tutorial on writing a TCP server last week in Real World Haskell .一切顺利,我的最终版本可以正常工作,并且能够在
我在访问我的域时遇到了这个问题:我看到了我的默认 http500 错误 django 模板正在显示。 我有 gunicorn 设置: command = '/usr/local/bin/gunicor
我更换了电脑,并重新安装了所有版本:tomcat 8 和 6、netbeans 8、jdk 1.7、hibernate 4.3.4,但是当我运行 Web 应用程序时,出现此错误。过去使用我的旧电脑时,
您好,我是这个项目的新手,我在 CentOS7 ec2 实例上托管它时遇到问题。当我访问我的域时出现此错误: 2017/02/17 05:53:35 [error] 27#27: *20 connec
在开始之前,我已经查看了所有我能找到的类似问题,但没有找到解决我的问题的方法。 我正在运行 2 个 docker 容器,1 个用于 nginx,1 个用于 nodejs api。我正在使用 nginx
使用 debian 包将 kaa -iot 平台配置为单节点时。我收到以下错误。 himanshu@himpc:~/kaa/deb$ sudo dpkg -i kaa-node-0.10.0.deb
我是我公司开发团队的成员,担任管理员角色。我可以通过 https://developer.apple.com/ 访问团队的成员(member)中心 但是,当我尝试在 https://itunescon
我是一名优秀的程序员,十分优秀!