如何将参数从一个函数传递到另一个函数

debugcn 发表于 Dev

萨尔布拉吉·杜莱

我是 React 的新手并试图弄清楚一些事情。我写了下面的代码，应该将值从一个函数传递到另一个函数，最后接受来自对象的参数以填充它们。但是，我只能将 nameInput 对象的 text 属性视为输出。请让我知道我做错了什么？

import React, { Component } from 'react';

function FirstName(props){
    return <h1>Hi, {props.fname.name}</h1>
}

function LastName(props) {
    return (
      <div className="UserInfo">
        <FirstName fname={props.lname} />
        <h2>{props.lname.name}</h2>
      </div>
    );
  }

  function FullName(props){
    return (
      <div className="container">
          <LastName lname={props.fulname} />
          <div>{props.text}</div>
      </div>
    );
  }


  const nameInput = {
      name: {
        firstname: 'Savi',
        lastname: 'Dulai',
      },
      text: 'got it to work?'
  };

class ComponentPractise extends Component {
    state = {  }
    render() { 
        return ( 
            <div className="row">
                    <FullName 
                        text={nameInput.text}
                        fulname={nameInput.name}
                    />
            </div>
         );
    }
}

export default ComponentPractise;

我希望输出显示“嗨，Savi Dulai 让它工作了吗？”。任何帮助将非常感激。

美国

好像你失去了上下文。功能FullName是好的，但LastName和FirstName引用错误的道具属性。

import React, { Component } from 'react';

function FirstName(props){
    return <h1>Hi, {props.fname.firstname}</h1>
}

function LastName(props) {
    return (
    <div className="UserInfo">
        <FirstName fname={props.lname} />
        <h2>{props.lname.lastname}</h2>
    </div>
    );
}

function FullName(props){
    return (
    <div className="container">
        <LastName lname={props.fulname} />
        <div>{props.text}</div>
    </div>
    );
}


const nameInput = {
    name: {
        firstname: 'Savi',
        lastname: 'Dulai',
    },
    text: 'got it to work?'
};

class ComponentPractise extends Component {
    state = {  }
    render() { 
        return ( 
            <div className="row">
                    <FullName 
                        text={nameInput.text}
                        fulname={nameInput.name}
                    />
            </div>
        );
    }
}

export default ComponentPractise;

它应该可以工作，但我建议您更改检查您的函数和变量命名以使其更具可读性。

希望有帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。