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

我正在用React构建一个页面，我有两个组件，其中一个具有不同的功能。首先，ProfileFill，捕获表单数据，第二个，ProfileFillPercent，这是在另一个文件中，并作出表格填充的平均值。React.js - 分离文件中不同组件之间的通信

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状态的数据。

来源

2017-01-24 Aipi

我也有类似的情况，并开始使用终极版。

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

对于我来说，如果有必须通过您可能需要使用终极版的兄弟组件之间的许多数据的应用程序。

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

我开始学习终极版从丹·阿布拉莫夫这个视频教程： https://egghead.io/lessons/javascript-redux-writing-a-counter-reducer-with-tests

来源

2017-01-24 10:53:31

感谢您的帮助。我正在考虑这个问题，我将立即着手。感谢您提供这个视频建议。 :) – Aipi

欢迎你:)我开始使用Redux的时间太晚了，所以迁移变得越来越大，越来越困难，但是我控制着更好的状态并减少了很多我的代码只迁移了3个组件 –

如果你想支付pluralsight，有一个es6的伟大过程（将你的代码从es5迁移到es6也会很好），React，Redux和Webpack与Cory House。开始试用并查看本课程：https：//www.pluralsight.com/ –

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

来源

2017-01-24 01:37:41

你会想要lift the state up。从Facebook的阵营文档：

当你想从多个孩子汇总数据，或有两个子组件相互通信，向上移动的状态，使它们生活在父组件。然后父母可以通过道具将状态传递回儿童，以便孩子的组件始终彼此同步并与父母同步。

在你的情况，我假设有一些父组件将ProfileFill和ProfileFillPercent同时渲染为子组件。在父组件中设置状态，并将此状态作为道具传递给孩子。

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

来源

2017-01-24 01:44:55

认为你越来越近了。

有点糊涂了，所以我就简单介绍一下，在3种方式：

ProfileFill（儿童）需要将数据传递到ProfileFillPercent（家长）。

答：
- 您可以从中接受一个参数，可以用来从孩子将数据发送到父就调用它的父传递一个功能道具。
- 您可以为两者制作一个父容器，并从道具顶部传递所需数据。
ProfileFillPercent（家长）需要将数据传递到ProfileFill（孩子）。

答：
- 您可以直接把它作为从父道具。
- 您可以使用Redux（最好是更大的应用程序）

来源

2017-01-24 04:14:15

谢谢您的回答！我将使用Redux，因为它会变成一个更大的应用程序。 – Aipi

@Aipi Yup，真棒！ –

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

回答

相关问题