React.js - 不同文件中不同组件之间的通信

Question

我正在使用 React 构建一个页面，我有两个组件，其中一个具有不同的功能。第一个，ProfileFill，捕获表单数据，第二个，ProfileFillPercent，在另一个文件中，对表单填充进行平均。

ProfileFill.js：

import React from 'react';
import ReactDOM from 'react-dom';

export const CustomerFill = React.createClass({
handleChange() {
    const customerName = this.customerName.value;
    const customerCPF = this.customerCPF.value;

    this.props.onUserInput(customerName, customerCPF);
},
render(){
    const {customerName, customerCPF} = this.props;
    return(
        <div>
            <div className="form-group col-sm-12 col-md-5">
                <label htmlFor="inputName">Nome do segurado:</label>
                <input 
                    ref={(r) => this.customerName = r}
                    type="text" 
                    className="form-control" 
                    placeholder="Insira o nome do segurado" 
                    value={customerName} 
                    onChange={this.handleChange} 
                />
            </div>
            <div className="form-group col-sm-12 col-md-5">
                <label htmlFor="inputName">CPF do segurado:</label>
                <input 
                    ref={(r) => this.customerCPF = r}
                    type="number" 
                    className="form-control" 
                    placeholder="Insira o CPF do segurado" 
                    value={customerCPF} 
                    onChange={this.handleChange} 
                />
            </div>
        </div>
    )
   }
});

export const ProfileFill = React.createClass({
getInitialState() {
    return{
        customerName: '',
        customerCPF: '',
    };
},

handleUserInput(customerName, customerCPF) {
    this.setState({
        customerName: customerName,
        customerCPF: customerCPF,
    });

},

render(){

    const { customerName, customerCPF } = this.state;
    this.xpto = this.state;
    console.log(this.xpto);
    return(
        <div>
            <div className="lateral-margin">
                <h2>INFORMAÇÕES PESSOAIS</h2>
            </div>
            <div id="profile-fill" className="intern-space">
                <form id="form-space">
                        <CustomerFill 
                            customerName={customerName} 
                            customerCPF={customerCPF} 
                            onUserInput={this.handleUserInput}
                        />
                </form>
            </div>
        </div>
    );
 }
});

ReactDOM.render(
   <ProfileFill />,
document.getElementById('fill-container')
);

export default ProfileFill;

ProfileFillPercent.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ProfileFill from './profileFill.js';

console.log(ProfileFill.xpto);
export const ProfileFillPercent = React.createClass({
   render() {
  //things happen here
  }
});

我正在创建一个变量，这是ProfileFill 的一个元素，我需要将它传递给另一个文件中的 ProfileFillPercent。我试图用单例模式传递它，比如this Stack explanation，但是，它不起作用。知道如何传达这两个不是父母但共享相同数据的组件吗？ 在这种情况下，xpto 是存储 ProfileFill 状态的数据。

Answer 1

我也有类似的情况，开始使用 Redux。

有很多帖子说你可能不需要 Redux： https://www.drinkingcaffeine.com/dan-abramov-you-might-not-need-redux/

对我来说，如果您的应用程序必须在兄弟组件之间传递许多数据，您可能需要使用 Redux。

使用 Redux，您可以保存客户列表的状态并避免每次加载组件时使用 ajax。这样您就可以减少代码并更好地调试它。

我从 Dan Abramov 的视频教程开始学习 Redux： https://egghead.io/lessons/javascript-redux-writing-a-counter-reducer-with-tests

Answer 2

认为你已经接近了。

虽然有点困惑，所以我将简要解释三种方式：

• ProfileFill(Child) 需要将数据传递到 ProfileFillPercent(Parent)。

  回答：

  • 您可以将函数作为 prop 从接受 参数，可用于将数据从孩子发送到 父母打电话给它。

  • 您可以为两者制作一个父容器并传递所需的数据 从顶部作为道具。

• ProfileFillPercent (Parent) 需要将数据传递到 ProfileFill(child)。

  回答：

  • 您可以直接将其作为来自 Parent 的 props 传递。

  • 您可以使用Redux（最好是更大的应用程序）

Answer 3

您可以将PubSub 引入React 组件之间的通信。对于反应，有react-pubsub

Answer 4

你会想要lift the state up。来自 Facebook 的 React 文档：

当您想要聚合来自多个子组件的数据或让两个子组件相互通信时，将状态向上移动以使其存在于父组件中。然后，父组件可以通过 props 将状态向下传递给子组件，以便子组件始终彼此同步并与父组件同步。

在您的情况下，我假设有一些父组件将 ProfileFill 和 ProfileFillPercent 都呈现为子组件。在父组件中设置状态，并将此状态作为道具传递给子组件。

如果您需要改变子组件中的状态，请按照this pattern 将 setState 函数作为道具向下传递。