Reactjs 在react redux之间传递/编辑数据
我想问我是否有3个组件不是父子关系(请不要要求我将3个按钮加入一个组件),如下所示,如果我应用redux并将它们放在同一个商店中, 是否可以通过reduce单击按钮1编辑输入3值 (请假设所有MapStateTrops都已完成) 谢谢Reactjs 在react redux之间传递/编辑数据,reactjs,redux,Reactjs,Redux,我想问我是否有3个组件不是父子关系(请不要要求我将3个按钮加入一个组件),如下所示,如果我应用redux并将它们放在同一个商店中, 是否可以通过reduce单击按钮1编辑输入3值 (请假设所有MapStateTrops都已完成) 谢谢 按钮1 | 按钮2 | 按钮3 组件 class Button1 extends React.Component { render() { return ( <div>
按钮1 | 按钮2 | 按钮3
组件
class Button1 extends React.Component {
render() {
return (
<div>
<Button id="Button1" ></Button>
<input id="input1" />
</div>
);
}
}
class Button2 extends React.Component {
render() {
return (
<div>
<Button id="Button2" ></Button>
<input id="input2" />
</div>
);
}
}
class Button3 extends React.Component {
render() {
return (
<div>
<Button id="Button3" ></Button>
<input id="input3" />
</div>
);
}
}
class按钮1扩展了React.Component{
render(){
返回(
);
}
}
类按钮2扩展了React.Component{
render(){
返回(
);
}
}
类按钮3扩展了React.Component{
render(){
返回(
);
}
}
ReactDOM
ReactDOM.render(
<Provider store={store}>
<Button1/>
</Provider>,
document.getElementById('div1')
);
ReactDOM.render(
<Provider store={store}>
<Button2/>
</Provider>,
document.getElementById('div2')
);
ReactDOM.render(
<Provider store={store}>
<Button3/>
</Provider>,
document.getElementById('div3')
);
ReactDOM.render(
,
document.getElementById('div1')
);
ReactDOM.render(
,
document.getElementById('div2')
);
ReactDOM.render(
,
document.getElementById('div3')
);
是的,只要他们有相同的商店,这是可能的。在redux上传递的所有内容都将反映在其他组件上。在将大型应用程序拆分为小型应用程序时,这一点非常重要,这样做可以有效地管理企业复杂性应用程序的用户
看看这个例子,我从这个简单的小提琴。这个提琴创建了一个简单的待办事项应用程序
ReactDOM.render(
<Provider store={todoStore}>
<App />
</Provider>,
document.getElementById('container')
);
ReactDOM.render(
<Provider store={todoStore}>
<App />
</Provider>,
document.getElementById('container2')
);
ReactDOM.render(
<Provider store={todoStore}>
<App />
</Provider>,
document.getElementById('container3')
);
ReactDOM.render(
所以,从技术上讲,你们想要实现的是可行的,并且是将一个巨大的单片应用程序拆分成不同(react组件)的迷你应用程序的方法
PS:原来的fiddle不是我的。只是为了一个示例而编辑它。是否可以使用ref访问其他组件中的DOM?我指的是上面3个按钮的关系