Reactjs 如何处理传入的参数

我被困在这里，因为我是新的反应，我的问题是如何通过道具在反应中传递论点

这是我的代码，我想把一个参数从一个component.js传递给另一个componentjs

OneComponentJs：

const EditProfile = props => {
  const avtar = [
    "avtar/avtar1.png",
    "avtar/avtar2.png",
    "avtar/avtar3.png",
    "avtar/avtar4.png",
    "avtar/avtar9.png",
    "avtar/avtar7.png"
  ];

  const avtars = (
    <CardGroup>
      {avtar.map((_avtar, index) => {
        return (
          <Card key={index}>
            <Image src={avtar[index]} thumbnail />
            <Button type="checkbox" variant="dark">
              Select me
            </Button>
          </Card>
        );
      })}
    </CardGroup>
  );

  let getName = event => {
    return event.target.value;
  };
  let getEmail = event => {
    return event.target.value;
  };

  return (
    <div>
      <Form onSubmit={props.edit(getName, getEmail, avtar[3])}>
        <Form.Group>
          <Form.Label className="text-info">Name</Form.Label>
          <Form.Control
            type="text"
            placeholder={props.name}
            onChange={getName}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label className="text-info">Email</Form.Label>
          <Form.Control
            type="text"
            placeholder={props.email}
            onChange={getEmail}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label className="text-info">Choose Avatar</Form.Label>
          {avtars}
        </Form.Group>
        <Form.Group>
          <Button type="submit">Update Your Profile</Button>
        </Form.Group>
      </Form>
    </div>
  );
};
export default EditProfile;

const EditProfile=props=>{
常数avtar=[
“avtar/avtar1.png”，
“avtar/avtar2.png”，
“avtar/avtar3.png”，
“avtar/avtar4.png”，
“avtar/avtar9.png”，
“avtar/avtar7.png”
];
常数avtars=(
{avtar.map（_avtar，index）=>{
返回(
选择我
);
})}
);
让getName=event=>{
返回event.target.value；
};
让getEmail=event=>{
返回event.target.value；
};
返回(
名称
电子邮件
选择化身
{avtars}
更新您的个人资料
);
};
导出默认编辑配置文件；

anotherComponent.js

    class Profile extends Component {
  state = {
    profile: {
      name: "Pramod",
      email: "pramod@gmail.com",
      avatar: "avtar/avtar1.png",
      dept: "HRDD"
    }
  };

  profileEditor = (_name, _email, _avatar) => {
    this.setState = {
      profile: {
        name: _name,
        email: _email,
        avatar: _avatar,
        dept: "HRDD"
      }
    };
  };

  render() {
    return (
      <div>
        <Row className="h-100">
          <Col xs lg={3}>
            <Card className="m-2 border-0">
              <Card.Body className="border-0 p-0">
                <Image
                  className="border-0 "
                  src={this.state.profile.avatar}
                  thumbnail
                />
              </Card.Body>
              <Card.Footer className="border-bottom ">
                <label className="h1 ">{this.state.profile.name}</label>
                <br />
                <label>{this.state.profile.email}</label>
                <br />
                <Button size="lg" variant="secondary" className="my-4" block>
                  Edit profile
                </Button>
                <Image
                  src="icon/dept.png"
                  style={{ height: "30px", width: "30px" }}
                />
                <label className="text-primary ml-2">
                  {this.state.profile.dept}
                </label>
              </Card.Footer>
            </Card>
          </Col>
          <Col xs lg={9}>
            <Col lg={11}>
              <Tabs defaultActiveKey="edit" className="mt-3 border-bottom">
                <Tab eventKey="files" title="Files" className="border-off">
                  <Row className="mt-3 px-4">
                    <Col lg={6}>
                      <Folder />
                    </Col>
                    <Col lg={6}>
                      <Folder />
                    </Col>
                  </Row>
                </Tab>
                <Tab
                  eventKey="addFiles"
                  title="Add File"
                  className="border-off"
                >
                  <Addfile />
                </Tab>
                <Tab
                  eventKey="fileUnderProcess"
                  title="File Under Process"
                  className="border-0"
                >
                  3
                </Tab>
                <Tab
                  eventKey="rejectFile"
                  title="Rejected File"
                  className="border-0"
                >
                  4
                </Tab>
                <Tab eventKey="edit" title="Edit Profile" className="border-0">
                  <EditProfile
                    name={this.state.profile.name}
                    email={this.state.profile.email}
                    edit={this.profileEditor}
                  />
                </Tab>
              </Tabs>
            </Col>
          </Col>
        </Row>
      </div>
    );
  }
}

state = {
    ['name']: '',
    ['email']: ''
}

let onNameChange = event => { // bind this function to your input field
    this.setState({['name']: event.target.value})
};
let onEmailChange = event => {
    this.setState({['email']: event.target.value})
};
onSubmit = e => {
    e.preventDefault();
    this.props.edit(this.state);
}
<Form onSubmit={this.onSubmit}>
</Form>

profileEditor = formData => {
    this.setState = {
      profile: {
        name: formData.name,
        email: formData.email,
        dept: "HRDD"
      }
    };
  };

类配置文件扩展组件{
状态={
简介：{
名称：“Pramod”，
电子邮件：“pramod@gmail.com",
阿凡达：“avtar/avtar1.png”，
部门：“HRDD”
}
};
profileEditor=（\u姓名，\u电子邮件，\u头像）=>{
this.setState={
简介：{
姓名：_name，
电子邮件：_电子邮件，
阿凡达：_阿凡达，
部门：“HRDD”
}
};
};
render（）{
返回(
{this.state.profile.name}


{this.state.profile.email}


编辑配置文件
{this.state.profile.dept}
3.
4.
);
}
}

导出默认配置文件

---

所以我可以得到三个参数，这将改变我的状态

在您的oneComponent.js中维护一些状态，然后将其传递给另一个component.js。 e、 g

OneComponent.js

    class Profile extends Component {
  state = {
    profile: {
      name: "Pramod",
      email: "pramod@gmail.com",
      avatar: "avtar/avtar1.png",
      dept: "HRDD"
    }
  };

  profileEditor = (_name, _email, _avatar) => {
    this.setState = {
      profile: {
        name: _name,
        email: _email,
        avatar: _avatar,
        dept: "HRDD"
      }
    };
  };

  render() {
    return (
      <div>
        <Row className="h-100">
          <Col xs lg={3}>
            <Card className="m-2 border-0">
              <Card.Body className="border-0 p-0">
                <Image
                  className="border-0 "
                  src={this.state.profile.avatar}
                  thumbnail
                />
              </Card.Body>
              <Card.Footer className="border-bottom ">
                <label className="h1 ">{this.state.profile.name}</label>
                <br />
                <label>{this.state.profile.email}</label>
                <br />
                <Button size="lg" variant="secondary" className="my-4" block>
                  Edit profile
                </Button>
                <Image
                  src="icon/dept.png"
                  style={{ height: "30px", width: "30px" }}
                />
                <label className="text-primary ml-2">
                  {this.state.profile.dept}
                </label>
              </Card.Footer>
            </Card>
          </Col>
          <Col xs lg={9}>
            <Col lg={11}>
              <Tabs defaultActiveKey="edit" className="mt-3 border-bottom">
                <Tab eventKey="files" title="Files" className="border-off">
                  <Row className="mt-3 px-4">
                    <Col lg={6}>
                      <Folder />
                    </Col>
                    <Col lg={6}>
                      <Folder />
                    </Col>
                  </Row>
                </Tab>
                <Tab
                  eventKey="addFiles"
                  title="Add File"
                  className="border-off"
                >
                  <Addfile />
                </Tab>
                <Tab
                  eventKey="fileUnderProcess"
                  title="File Under Process"
                  className="border-0"
                >
                  3
                </Tab>
                <Tab
                  eventKey="rejectFile"
                  title="Rejected File"
                  className="border-0"
                >
                  4
                </Tab>
                <Tab eventKey="edit" title="Edit Profile" className="border-0">
                  <EditProfile
                    name={this.state.profile.name}
                    email={this.state.profile.email}
                    edit={this.profileEditor}
                  />
                </Tab>
              </Tabs>
            </Col>
          </Col>
        </Row>
      </div>
    );
  }
}

state = {
    ['name']: '',
    ['email']: ''
}

let onNameChange = event => { // bind this function to your input field
    this.setState({['name']: event.target.value})
};
let onEmailChange = event => {
    this.setState({['email']: event.target.value})
};
onSubmit = e => {
    e.preventDefault();
    this.props.edit(this.state);
}
<Form onSubmit={this.onSubmit}>
</Form>

profileEditor = formData => {
    this.setState = {
      profile: {
        name: formData.name,
        email: formData.email,
        dept: "HRDD"
      }
    };
  };

---

干杯；）

请你把相关的代码贴出来好吗？你贴的那个真的不行吗