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

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

Answer 1

认为你已经接近了。

有点困惑，所以我将简要解释一下，这3种方式：

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

答案
- 您可以从接受的父级传递函数作为prop 参数，可用于将数据从子节点发送到父母在打电话。
- 您可以为两者创建父容器并传递所需的数据从顶部作为道具。
ProfileFillPercent（家长）需要将数据传递到 ProfileFill（孩子）。

<强>答：
- 您可以直接将其作为来自父母的道具传递。
- 您可以使用Redux（最好是更大的应用程序）

Answer 2

我有类似的情况并开始使用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 3

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

Answer 4

你想要lift the state up。来自Facebook的React docs：

如果要聚合来自多个子项的数据或让两个子组件相互通信，请向上移动状态以使其位于父组件中。然后父母可以通过道具将状态传递给孩子，这样子组件总是彼此同步并与父母同步。

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

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

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

4 个答案: