在React.js中触发子项重新渲染

小编典典

在React.js中触发子项重新渲染

reactjs

Parent（MyList在我的示例中）组件通过Child（MyComponent）组件呈现一个数组。父级决定更改数组中的属性，React触发子级重新渲染的方式是什么？

this.setState({});调整数据后，我想出的只是在Parent中。这是触发更新的hack还是React方法？

JS小提琴：https：
//jsfiddle.net/69z2wepo/7601/

var items = [
  {id: 1, highlighted: false, text: "item1"},
  {id: 2, highlighted: true, text: "item2"},
  {id: 3, highlighted: false, text: "item3"},
];

var MyComponent = React.createClass({
  render: function() {
    return <div className={this.props.highlighted ? 'light-it-up' : ''}>{this.props.text}</div>;
  }
});

var MyList = React.createClass({
  toggleHighlight: function() {
    this.props.items.forEach(function(v){
      v.highlighted = !v.highlighted;
    });

    // Children must re-render
    // IS THIS CORRECT?
    this.setState({});
  },

  render: function() {
    return <div>
      <button onClick={this.toggleHighlight}>Toggle highlight</button>
      {this.props.items.map(function(item) {
          return <MyComponent key={item.id} text={item.text} highlighted={item.highlighted}/>;
      })}
    </div>;
  }
});

React.render(<MyList items={items}/>, document.getElementById('container'));

阅读 312

2020-07-22

共1个答案

小编典典

这里的问题是您要在中存储状态，this.props而不是this.state。由于此组件是mutating
items，因此items为state，应存储在中this.state。（这是有关道具与状态的很好的文章。）这解决了渲染问题，因为更新items时会调用setState，它将自动触发重新渲染。

这是使用状态而不是prop的组件的外观：

var MyList = React.createClass({
    getInitialState: function() {
        return { items: this.props.initialItems };
    },

    toggleHighlight: function() {
        var newItems = this.state.items.map(function (item) {
            item.highlighted = !item.highlighted;
            return item;
        });

        this.setState({ items: newItems });
    },

    render: function() {
        return (
            <div>
                <button onClick={this.toggleHighlight}>Toggle highlight</button>
                { this.state.items.map(function(item) {
                    return <MyComponent key={item.id} text={item.text} 
                             highlighted={item.highlighted}/>;
                }) }
            </div>
        );    
    }
});

React.render( <MyList initialItems={initialItems}/>,
              document.getElementById('container') );

请注意，我将itemsprop
重命名为initialItems，因为它很清楚MyList会对其进行突变。这是文档建议的。

您可以在这里看到更新的小提琴：https：//jsfiddle.net/kxrf5329/

2020-07-22