React (JSX) 中的子级到父级通信没有通量

Posted 2023-02-21

【中文标题】React (JSX) 中的子级到父级通信没有通量

【英文标题】：Child to parent communication in React (JSX) without flux

【发布时间】：2016-09-18 08:12:58

【问题描述】：

我真的是 React 的新手，我正在努力解决在我看来是一个简单的问题。这是我构建的组件的图片。

Color Picking Component

我要完成的工作似乎微不足道，但实际上我读过的每篇解释该做什么的文章都告诉我一些不同的事情，而且没有一个解决方案有效。它分解为：当用户点击一个标签时，它会构建一个托盘并循环通过一组颜色来构建颜色按钮。单击颜色按钮时，它需要将单击的颜色传递给其父组件并运行一个函数来更新其颜色。我已经阅读了有关通量、事件冒泡、将“this”绑定到属性的信息，但这些解决方案似乎都没有奏效。对于像我这样的新手来说，React 文档基本上没用。在这一点上，我想避免像 Flux 这样的复杂事件结构，因为我将一些简单的组件附加到一个我最初没有用 React 编写的现有应用程序中。

另外，PS，这段代码在 JSX 中，这对我来说比直接 JS 反应更有意义。提前感谢您的帮助！

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];

var EditDrawer = React.createClass(
    updateColor: function() 
        console.log("New Color: " + i);
    ,
    render: function()
        var passTarget = this;
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        colorsArray.map(function(object, i)
                            return <ColorButton buttonColor=object key=i />;
                        )
                    </div>
                </div>
            </div>
        );
    
)

var ColorButton = React.createClass(
    render: function()
        var buttonStyle = 
            backgroundColor: this.props.buttonColor,
        ;
        return (
            <div className="tag-edit-color-button" style=buttonStyle >
            </div>
        )
    
)

【问题讨论】：

请注意，这是我尝试使用的两种技术，但都没有奏效。 haochuan.io/…andrewhfarmer.com/component-communication/#3-callback-functions

【参考方案1】：

回调函数应该可以工作。正如您在之前的评论中提到的，您可以使用捕获的 this 从子级访问 updateColor 函数：

var passTarget = this;
...
...
return <ColorButton 
  buttonColor=object 
  key=i 
  update=passTarget.updateColor />

或者正如博格丹所说，你可以在你的回调函数之后通过 map 传递它：

colorsArray.map(function(object, i)
  return <ColorButton 
           buttonColor=object 
           key=i 
           update=this.updateColor />;
, this)

您的<ColorButton /> 组件应该能够运行一个简单的 onClick 函数：

onClick=this.props.update

然后您可以简单地利用父组件中的普通事件目标来捕获被点击按钮的颜色：

updateColor: function(e) 
  console.log(e.target.style.backgroundColor);

这里有一个完整的DEMO 来演示。

【讨论】：

这看起来很有希望。我周末下班了，但我会在下周检查并在此处更新。感谢您的帮助！

效果很好，非常感谢您的帮助！

【参考方案2】：

您可以将回调函数从父组件传递给子组件，就像这样简单：

 <ColorButton buttonColor=object key=i onColorSelect=this.updateColor/>

（在使用 React.createClass 时，所有类方法都已经绑定到this，所以你不需要调用.bind(this)）。

然后从ColorButton 组件你可以调用这个回调为this.props.onColorSelect(...)。

JS Bin 示例：http://jsbin.com/fivesorume/edit?js,output

【讨论】：

谢谢博格丹！不幸的是，这只会返回错误：“无法读取未定义的属性 'updateColor'”。我认为这是因为我正在遍历一个数组，所以“this”被覆盖了。为了解决这个问题，我之前定义了一个变量来捕获“this”，这让我可以从孩子访问 updateColor 函数。唯一的问题是，如果我尝试将任何内容传递给函数，它将在创建时运行该函数九次，而不是等待点击。 onClick=this.props.onColorSelect(this.props.buttonColor)outputs this

关于将this 传递给 Array.map - 您也可以将其作为第二个参数.map(function..., this) 传递，然后将使用来自外部范围的 this。关于onClick=this.props.onColorSelect(this.props.buttonColor)，您不是在此处传递函数 - 您是在渲染期间调用它并传递结果。您需要在组件中创建单独的函数。

这很有意义。下周我会试一试。感谢您的帮助！

【参考方案3】：

好的，这在React中很简单，不用flux或redux，类似于将props从父级传递给子级，这里我们可以使用回调函数如下：

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];


var EditDrawer = React.createClass(
    updateColor: function(i) 
        alert("New Color: " + i);
    ,
    render: function()
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        colorsArray.map(function(object, i)
                            return <ColorButton buttonColor=object key=i updateColor=this.updateColor/>;
                        , this)
                    </div>
                </div>
            </div>
        );
    
);


var ColorButton = React.createClass(
    updateColor: function() 
        this.props.updateColor(this.props.buttonColor);
    ,
    render: function()
        var buttonStyle = 
            backgroundColor: this.props.buttonColor,
        ;
        return (
            <div className="tag-edit-color-button" 
            style=buttonStyle
            onClick=this.updateColor>
              this.props.buttonColor
            </div>
        )
    
);