Question

我想问一下我是否有3个不是父子关系的组件（请不要让我将3个按钮加入一个组件）关系，如下所示，如果我应用redux并将它们放在同一家商店下，是否可以通过缩小点击 Button1 来编辑 input3 值（请假设所有Mapstatetoprops已完成）

谢谢

Button1

|

Button2

|

Button3

组件

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>
        );
    }
}

反应

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')
);

Answer 1

是的，有可能，只要他们有相同的商店。您在redux上传递的所有内容都会反映在其他组件上。将大型应用程序拆分为小型应用程序时，这是必不可少的，这样可以使从事企业复杂性应用程序的人员得到有效管理。

看看这个示例，我是根据here这个简单的小提琴制作的。这个小提琴创建了一个简单的待办事项应用程序。

nextFragment

一旦我在其他组件中创建了待办事项，它将反映到其他两个组件中。在这里查看经过编辑的小提琴：https://jsfiddle.net/gk9kaopr/2455/

因此，从技术上讲，您想要实现的目标是可行的，并且是将大型单片应用程序拆分为不同（反应组件）微型应用程序时要走的路

PS：原始的提琴不是我的。只是出于示例目的对其进行了编辑。

在React Redux之间传递/编辑数据

1 个答案: