Question

尝试从React.Children.map更改字符串变量，然后React.cloneElement更改颜色。我的主页上有一个标题。我想更新标题字符串中每个字符的节点颜色。尝试这样做，但得到错误：Cannot read property 'colorString' of undefined

const LetterStyle = React.createClass({
  colorString: function(value){
    this.setState({color: "green"});
  },

  render: function(){
    const colorArray = []
    var childrentWithProps = React.Children.forEach(this.props.children, (child, i) => {
      for (var i=0; i<child.length; i++){
        return React.Children.map(child[i], function(content, i) {
          if(content !== " "){
            React.cloneElement(content, { colorString: this.colorString })
          }
        });
      }
    })

    return(
      <h1 className="lead" ref="lead">
        <span>{childrentWithProps}</span>
      </h1>
    );
  }

});

Answer 1

当您到达this

行时，您似乎丢失了React.cloneElement(content, { colorString: this.colorString })引用

尝试定义var that = this;在render function() {之后喜欢

  render: function()
    {
      var that = this;
      const colorArray = [] to preserve the properties of `this`.

并将行更改为 React.cloneElement(content, { colorString: that.colorString })

另外，我建议您阅读let，var和const之间的差异。在ES6语法中，var通常是不必要的，将其与const和let混合会让人感到困惑。点击此处了解有关差异的更多信息：

What's the difference between using "let" and "var" to declare a variable?

Answer 2

这是我第一次看到 React Top-Level API的.map和forEach实现。他们的用法与他们原生的JavaScript表兄弟不同。

您的代码存在一些问题。

导致错误的第一个问题：

后者的文档声明React.Children.map和React.Children.forEach有两个参数，第一个是键控片段或子数组，第二个是回调，其唯一的参数是这个值设置为React.Children.forEach和React.Children.map来电。他们的签名如下：

React.Children.forEach(children, function[(thisArg)])

React.Children.map(children, function[(thisArg)])

然后解决方案是不传入参数，而是传入一个调用以删除错误。

作为示例，您生成的.map调用将如下所示：

return React.Children.map(child[i], function(this){
  if (content !== " "){
    React.cloneElement(content, { colorString: this.colorString });
  }
});

值得一提的第二个问题：

你在这里使用了forEach，它将有效地迭代this.props.children数组。

在其中，您引用了在child上迭代的当前值，并在该元素上运行for循环，然后转到.map调用。

这对您的应用程序看起来不正确，因为child很可能代表单个组件或React元素，而不是要再次循环的数组。

解决方案：在这里使用for循环或 forEach，但不是两者

在ReactJs中，通过循环字符串动态地更改节点元素的颜色

2 个答案: