Reactjs 在react redux之间传递/编辑数据

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>

我想问我是否有3个组件不是父子关系(请不要要求我将3个按钮加入一个组件),如下所示,如果我应用redux并将它们放在同一个商店中, 是否可以通过reduce单击按钮1编辑输入3值 (请假设所有MapStateTrops都已完成)

谢谢


按钮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个按钮的关系