Question

我开始学习React大约。一个月前，我对该概念感到非常困惑，因为它对我来说仍然是新事物（与我之前在C ++和C中的工作相比）。

为了快速总结，我想知道什么是React等效于C ++从函数返回。如何从一个函数（在我的情况下为类的函数/状态）中返回一个或多个值，并在其他组件中使用它。

我制作了一个简单的脚本，该脚本可以更改背景以在鼠标上模拟RGB灯，并且可以将HSL色彩模式应用于组件的背景。我想在页面上的多个组件，图标等上使用此功能，但感觉有比将所有功能导入三个文件中更好的方法，从而使工作量增加了三倍。

import React, { Component } from 'react'
import './colorStrip.scss'


class ColorStrip extends Component {

    constructor(props) {
        super(props)

        this.colorHue=10;
        this.colorSaturation=100;
        this.colorLightness=50;

        this.state = {
            color:"hsl(0,100%,50%)"
        }

        this.changeColor(1);
    } 


    changeColor = (speed) => {

        this.colorHue+=10*speed;

        if(this.colorHue>=360)
            this.colorHue=0;

        this.setState({ 
            color : "hsl("+this.colorHue+","+this.colorSaturation+"%,"+this.colorLightness+"%)"
        })


        setTimeout(() => {this.changeColor(speed)},75)
    }



    render() {
        return (
            <svg style={{backgroundColor:this.state.color}} className="strip">
            </svg>

        )
    }
}

export default ColorStrip

所以我想在页面上的其他三个SVG组件中使用this.state.color（或this.state.colorHue或任何状态）。

我真的看了其他一些答案，但是它们非常复杂，需要多次回报，这令人困惑。

Answer 1

您可以使用几个不同的选项来实现此目的。一种方法是将计算颜色的函数移到更高级别的组件（因此是父组件之一），该组件具有要将状态传递给子组件的子组件，然后通过组件props向下传递状态。

class parent extends component {
    // your functions to calculate your colour

    render () {
        return <div>
            <ChildComponent colourProp={this.state.color} />
            <ChildComponent colourProp={this.state.color} />
            <ChildComponent colourProp={this.state.color} />
        </div>
    }
}

如果您需要根据子组件更改颜色，另一种选择是向下传递将颜色更改为子组件的功能。与上面的示例类似，但是您还将颜色更改功能也传递给了子级。

<ChildComponent colourProp={this.state.color} changeColour={this.changeColourFunction}/>

现在您可以从孩子那里调用该功能

// Inside child component
this.props.changeColour(params)

现在您的父母将更改其状态，新颜色将在父母中更改并传递给所有孩子。

最后，您可以尝试使用ReactContext，将其设置在所有组件外部的文件中，然后将其导入到您的组件中。在传递初始状态的父组件中，您将使用YourContext.Provider并传递初始状态。然后，您可以在孩子中使用YourContext.Consumer。有关更多信息，请参见：https://reactjs.org/docs/context.html

Answer 2

正如乔纳森所说，您可以将状态作为道具传递给其他组件，但前提是必须将它们连接起来。如果您使用的svg不在同一文件中呈现，则情况将变得有些混乱。为了解决这个问题，人们使用状态管理工具，例如redux和context API。

例如，

Redux是基于数据库设计构建的，因此您可以全局访问状态。坚韧确实有用，环境对初学者不友好，在完全掌握反应之前，我不建议您学习它。

Answer 3

尝试这种方式：

import './colorStrip.scss'
class ColorStrip extends Component {
  constructor(props) {
    super(props)
    this.colorHue=10;
    this.colorSaturation=100;
    this.colorLightness=50;
    this.state = {
        color:"hsl(0,100%,50%)"
    }
    this.changeColor(1);
  } 
  changeColor = (speed) => {
    this.colorHue+=10*speed;
    if(this.colorHue>=360)
        this.colorHue=0;
    this.setState({ 
        color : "hsl("+this.colorHue+","+this.colorSaturation+"%,"+this.colorLightness+"%)"
    })
    setTimeout(() => {this.changeColor(speed)},75)
  }
  render() {
  const { color } = this.props;
    return (
        <svg style={backgroundColor:color} className="strip">
        </svg>
    )
  }
}
export default ColorStrip

Answer 4

我建议创建一个Higher-Order Component（HOC）来容纳颜色逻辑，然后您可以使用此HOC包装所需的任何组件，并且包装的组件将具有所需的逻辑和数据。

例如：

import React, { Component } from "react";

function withColor(WrappedComponent) {
    return class ComponentWithColor extends Component {
        constructor(props) {
            super(props);

            this.colorHue=10;
            this.colorSaturation=100;
            this.colorLightness=50;

            this.state = {
                color:"hsl(0,100%,50%)"
            }

            this.changeColor(1);
        }

        changeColor = (speed) => {

            this.colorHue+=10*speed;

            if(this.colorHue>=360)
                this.colorHue=0;

            this.setState({ 
                color : "hsl("+this.colorHue+","+this.colorSaturation+"%,"+this.colorLightness+"%)"
            })


            setTimeout(() => {this.changeColor(speed)},75)
        }

        render() {
            const { color } = this.state;
            return <WrappedComponent color={ color } { ...this.props }/>
        }
    }
}

然后，如果您定义了一个新组件，并且希望它可以访问color道具，则只需在构造之前将组件类/函数包装在withColor中即可。

例如：

class MyComponent extends Component {
    render() {
        const { color } = this.props;

        return (
            <svg style={backgroundColor:color} className="strip">
            </svg>
        )
    }
}

const MyComponentWithColor = withColor(MyComponent);
// then export & use MyComponentWithColor

如何将状态传递给React中的其他多个类

4 个答案: