通过prop将env变量从子组件传递到父组件

时间:2019-07-04 18:27:16

标签: reactjs react-router environment-variables react-props

我正在尝试使用emailjs和mailgun创建联系表单,并且已经在.env文件中添加了我的凭据,并在应该使用env变量的子组件中创建了props。但是在父组件中,我试图使用。

从子组件传递道具。

我尝试以联系表的形式实施道具

Contact.js 这是单击按钮时的逻辑

handleSubmit(event) {
    event.preventDefault();

        const {
        REACT_APP_EMAILJS_RECEIVER: receiverEmail,
        REACT_APP_EMAILJS_TEMPLATEID: template
        } = this.props.env

    this.sendFeedback(
      template,
      this.sender,
      receiverEmail,
      this.state.feedback
    );

    this.setState({
      formSubmitted: true
    });
  }

sendFeedback(templateId, senderEmail, receiverEmail, feedback) {
    window.emailjs
      .send('mailgun', templateId, {
        senderEmail,
        receiverEmail,
        feedback
      })
      .then(res => {
        this.setState({
          formEmailSent: true
        });
      })
      // Handle errors here however you like
      .catch(err => console.error('Failed to send feedback. Error: ', err));
  }

App.js

  <Route exact path= '/contact' render={(props) => <Contact env = {props} />} /> 

我正在尝试渲染道具的路线

预期输出应将道具渲染到父组件上。我对React非常陌生,并且喜欢该库的简单性。希望对此概念和解决方案有一个简短的了解。谢谢!

0 个答案:

没有答案