Home / Questions / 148501
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-03-20 09:13:49 +0800 CST 2020-03-20 09:13:49 +0800 CST

如何在两个或多个组件之间发送/返回参数

  • 772

我想知道如何在两个或多个组件之间发送参数/信息。例如，如果在一个组件中执行了一系列算术运算，或者某个请求将被返回，无论它可能是什么POST, GET，返回所述值，以在另一个组件中使用等等。

在我的情况下，操作将在调用的子组件中开始，Componente_2这些结果应该在调用的另一个子组件中使用Componente_3。

经过我的调查，我知道React继承的问题是非常明确的，或者说我是理解的，而且必须尊重，因为有一个父亲，他和很多孩子交流。

Component_1.jsx（父）

class componente1 extends Component{
   //captura los valores iniciales
   //por teclados o de una API
   //los envia a los ficheros correspondiente
}

Component_2.jsx（儿童）

class componente2 extends Component{
   //recibe los valores iniciales 
   //del componente 1
   //resolverá alguna operación y 
   //deberá retornar dicho resultado
   //al terminar la operacion
}

Component_3.jsx（儿童）

class componente3 extends Component{
   //que exista la posibilidad de tomar los valores  
   //retornados del componente 2 al componente 1
   //para luego realizar una operación
   //y retornarlos al terminar
}

注意：我认为文件是否在同一个文件夹中并不重要，因为我认为这与流程问题无关。

javascript

2 Answers

  1. 要将信息从一个组件传递到另一个组件，您最好使用 props，这里我根据https://reactjs.org/docs/components-and-props.html中的示例进行一些解释。

    假设您在 App.tsx（或 Jsx）中，并且您已经导入了 Welcome 组件，我们将继续创建它，就好像它是一个 Html 标记并将您需要传递的数据放置在 property="value “ 句法; 完成后，您可以使用 {props.author.nameProps} 调用组件内的数据

    在 app.tsx

    import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Welcome } from './Welcome ';
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

    在 Welcome.tsx

    class Welcome React.Component{

    constructor(props) {
    super(props);
    };

    public render() {
    return (
    <div> 
         <p>{props.name}</p>
    </div>
    }  
 }

    我希望我已经清楚了，我会继续关注任何问题。快乐的一天。

    • 2
  2. Best Answer

    您需要做的是从props一个组件到另一个组件进行通信。

    首先，要使用另一个（子）组件返回的内容处理父组件，您必须有一个事件处理程序：

    handleResponseFromComponente2(response){
    ...
}

    当你必须挂载它时，从componente2component1 的状态传递它的属性，如下所示：

    render() {
    ...
    <componente2 numero={this.state.num} operacion={this.state.op} onResponse={this.handleResponseFromComponente2.bind(this)} />
    ...
}

    在 的构造函数中componente2：

    反应 15 及以下

    （此版本的文档）

    class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: props.numero,
            operacion: props.operacion
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.numero == this.state.numero && nextProps.operacion == this.state.operacion){
            return null;
        }
        else{
            this.setState({
                numero: nextProps.numero,
                operacion: nextProps.operacion
            });
        }
    }

    // Para invocar al evento en el padre:
    handleCalcula(e){
        ... // Lo que quieras hacer aquí
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

    反应 16 及以上

    （此版本的文档）

    class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: null,
            operacion: null
        };
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if(nextProps.numero == prevState.numero && nextProps.operacion == prevState.operacion){
            return null;
        }
        return{
            numero: nextProps.numero,
            operacion: nextProps.operacion
        }
    }

    handleCalcula(e){
        ...
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

    注意从componentWillReceiveProps到的变化static getDerivedStateFromProps。在这个新版本的 React 中，您需要注意一些事项以保持最新状态，我建议您这样做。

    • 1