Question

我正在尝试创建一个简单的SPA（没有路由器）。它的结构也很简单：每个部分都有一个组件：

首页
服务
产品
- 产品
- 模态
联系我们

如您所见，组件产品具有两个子组件产品和模块。这些迭代次数与JSON对象一样多次：

Products.js

import React, { Component } from "react";
import ReactHtmlParser from "react-html-parser";
import "./Products.css";
import { products } from "./products.json";

import Product from "./Product/Product";
import Modal from "./Modal/Modal";

class Products extends Component {
  render() {
    return (
      <section id='products'>
        <div className='container'>
          <div className='row'>
            {products.map(product => {
              return (
                <div>
                  <Product
                    image={"/img/" + product.image}
                    name={product.name}
                    target={product.target}
                  />
                  <Modal
                    id={product.target}
                    title={product.name}
                    body={ReactHtmlParser(product.body)}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
}

export default Products;

每个产品都有一个更多信息按钮，该按钮可打开模式，另外还有一个按钮预算（“ Presupuestar” ）：

Modal

该功能应“更改状态” 与我们联系组件（一个简单的“与我们联系”表格）：

Form

该组件具有以下代码：

Contact.js

import React, { Component } from "react";
import "./Contact.css";

class Contact extends Component {
    constructor() {
        super();

        this.state = { budget: "Contact" };
    }
    render() {
        return (
            <section id='contact'>
                <div className='container'>
                    <div className='row'>
                        <div className='col-xs-12 col-md-6'>
                            <div className='contact-form'>
                                <form>
                                    ...
                                    {/* Subject */}
                                    <div className='form-group'>
                                        <div className='input-group'>
                                          <span className='input-group-addon' />
                                          <input
                                            type='text'
                                            className='form-control'
                                            id='subject'
                                            aria-describedby='Subject'
                                            placeholder='Subject'
                                            readonly='readonly'
                                            value={this.state.budget}
                                          />
                                        </div>
                                        {/* /form-group */}
                                    </div>
                                    {/* /Subject */}
                                    ...
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );
    }
}

我想那我应该在 Modal 组件中创建一个函数，以在预算（“ Presupuestar” ）按钮。我不知道如何更改其他组件的状态。

快速摘要：我必须进行以下状态更新：

How to

我正在阅读this similar question，但没有获得适用于我的方案的方法。有什么想法吗？

Answer 1

我认为您应该选择clickHandler组件中按钮的App功能，该功能包装整个组件，然后将其传递给Products组件，然后传递给{{1} }组件，但这不是一个好习惯，或者，您可以使用状态管理系统Redux，让您通过整个应用程序控制状态。

Answer 2

首先，您不需要用于change the state另一个组件的函数。做到这一点的明智方法是使用中介事物将2个组件连接在一起。解决此问题有两种方法。

最简单的方法是您可以通过URL（URL是“ 中介事物”）传输主题。当您点击按钮 Presupuestar 时，您可以将URL更改为页面联系人，如下所示：

/contact?subject=whatever you want

然后，在 Contact 组件中，您只需解析URL即可获取主题（您可以看到this question来了解如何从URL进行解析）。您可以看到my example。

第二种方法是使用单人模式创建服务，以将主题从 Modal 转移到 Contact 表单。您可以看到my example。

Answer 3

您可以这样实现

创建一个主应用程序组件，其中将包含所有这三个组件

在应用程序组件“ changeContacts”中添加功能

同时发送给产品和联系人

这是一个解释

--no-cache

更改React父组件状态

3 个答案: