React / Redux：如何将此状态从一个组件传递到另一个文件？

Question

我是React和Redux的初学者。 我一直在从事这个项目，最后我弄清楚了如何将数组存储为状态。 现在，我唯一的问题是，试图弄清楚如何将该状态传递给另一个文件。

这是两个文件-Hue.js -ColorShop.js

在Hue.js中，我制作了一个API并将内容保存到称为productJSON的对象数组中

Hue.js

class Hue extends React.Component {
    constructor() {
        super();
        this.state = {
            productJSON: []
        };
    }
    componentWillMount() {
    fetch('numberendpoint.json')
    .then(results => {
        return results.json();
    }).then(data => {
        let colorArray = [] //initialize array to receive json data
        for (let i =0; i < data.length; i++) {
            colorArray.push(data[i])

        }
    let productJSON = JSON.stringify(productArray)
        this.setState({productJSON: productJSON});
    })
    }

    render() {
      return (
        <div>
        <div className="container2">
        {this.state.productJSON}
    </div>
    </div>

)
}
}

现在，我试图将productJSON传递到同一文件夹ColorShop.js中的另一个文件。 我需要用productJSON替换_colors（从静态json文件读取）。

ColorShop.js

import Hue from './Hue.js'

const TIMEOUT = 100

Hue productJSON={this.state.productJSON} <---- my attempt to get it to work

export default { // I need to replace '_colors' with productJSON
  getColors: (cb, timeout) => setTimeout(() => cb(_colors), timeout || TIMEOUT),
}

我不想在ColorShop.js中创建另一个类，只想将this.state.productJSON导入其中，这可能吗？ 任何指针，不胜感激！

更新：使用了Rahamin建议的解决方案。 现在，我将下面的代码包含在“ Hue”类中。 但是我仍然遇到错误。

import React from 'react'

const TIMEOUT = 100

let productJSON;
class Hue extends React.Component {
  constructor() {
    super();
    this.state = {
      products: [],
    };
    this.getColors = this.getColors.bind(this)
  }
  componentDidMount() {
    fetch('http://tech.work.co/shopping-cart/products.json')
      .then(results => {
        return results.json();
      }).then(data => {

    let colorArray = []
    for (let i =0; i < data.length; i++) {
      colorArray.push(data[i])
      }
    console.log("jsonproduct=" + JSON.stringify(productArray))

    productJSON = JSON.stringify(colorArray)

   this.setState({productJSON: productJSON});

  });
  }

  render() {
    return (
      <div>
        <div className="container2">
          {this.state.productJSON}
        </div>
      </div>
      )
    }
}


export default {
  getColors: (cb, timeout) => setTimeout(() => cb(({ productJSON: value})), timeout || TIMEOUT), // here is where I am getting an error -- "value" is undefined. I'm not sure I was meant to put "value" there or something else...very new to React so its conventions are still foreign to me.
}

Answer 1

你想让我做什么？ 如果“其他文件”是一个辅助函数，则可以像使用任何编程语言在任何函数中一样向其传递参数：

在Hue中，您调用colorShop(productsJson)并获取可以在Hue中渲染的结果（ colorShop以小写字母开头，否则React会认为它是一个组件）。 看来“其他文件”可能只是Hue.js文件中的一个函数...

ColorShop也可以是将productsJson作为道具并在修改后进行渲染的组件。 ColorShop不必是一个类，它可以是一个功能组件。 但这似乎不是您的示例所必需的。

这是将colorShop作为函数插入类组件后的代码（不完整-请参见注释）。 您可以根据需要将其传递一个值并获得一个返回值，或者将其设置为状态：

import React from 'react';

const TIMEOUT = 100;

class Hue extends React.Component {

  constructor() {
    super();
    this.state = {
        productJSON: []
    };
    this.getColors = this.getColors.bind(this);
  }
  componentWillMount() {
    fetch('numberendpoint.json')
      .then(results => {
          return results.json();
      }).then(data => {
          let colorArray = []; //initialize array to receive json data
          for (let i = 0; i < data.length; i++) {
            colorArray.push(data[i]);
          }
      let productJSON = JSON.stringify(productArray);
          this.setState({ productJSON: productJSON });
      });
    }

    render() {

      // call getColor from wherver you need to call it.
      // for example:
      // getColors();

      return (
        <div>
          <div className="container2">
            {this.state.productJSON}
          </div>
        </div>
      );
    }

  getColors(cb, timeout) {
    setTimeout(() => cb(colors), timeout || TIMEOUT);

    // Here you can setState({ productJSON: value });
    // Or you can return a value to the caller
  }