Question

我是React的初学者。我正在开发一个项目，我有一个父组件。当我点击链接时，它会呈现一个模态。模态是另一个组成部分。

现在，如果我在父组件中进行了一些更改并单击链接，则会重置所有更改。我知道这是因为父组件再次渲染。有没有办法阻止它？

export default class Positions extends DJSComponent {

    static propTypes = {
        positionGridData: PropTypes.array.isRequired
    };
    static defaultProps = {
        positionGridData: []
    };

    state = {
        showModalForAddNew: false,
    };
    
    closeAddNewModal = () => {
        this.setState( {
            showModalForAddNew: false
        });
    };

    openAddNewModal =() => {
        this.setState( {
            showModalForAddNew: true
        });
    };

    render() {
        return (
        
              <div>
                  <Modal 
                    key="modal_addnew" 
                    modalTitle={'Add a New Row'}
                    show={this.state.showModalForAddNew} 
                    onModalClose = {this.closeAddNewModal} >

                     < AddNewModal /> 

                  <Modal>
                  
                  <Button 
                      onClick={this.openAddNewModal}
                  >
                      Add New
                  </Button>

                  <Grid
                      data={this.props.positionGridData}
                      style={{border:'1px solid silver'}}
                  />

            </div>
          );
    }
}

基本上， Grid 组件在父组件中为我渲染网格。如果我点击添加新按钮，我不希望我的网格再次渲染。喜欢如果我根据我的偏好重新排序我的网格列，然后当我点击Add New按钮时，它会在网格再次渲染时消失。

编辑1：

"surprising" constant initialization because of definition order

现在让我说我改变了这样的列。 My initial grid

现在如果我点击Add New按钮，我的Grid会再次呈现为初始状态，这是我不想要的。

Answer 1

在渲染网格组件时，您将这里的样式作为对象传递：

const gridStyle = {border:'1px solid silver'} // at the top of the file or just import this from other file containing styles

每当您的Positions Component渲染时，它总是会将JSON对象的新引用传递给Grid Component。如果你将样式作为常量放在文件的顶部并且你在这里保持不变或者使用className定义样式，那会更好。

例如：

 <Grid
   data={this.props.positionGridData}
   style={gridStyle}
 />

在渲染中使用它：

import shallowEqual from 'shallowequal'

class Grid extends React.Component {
  shouldComponentUpdate(nextProps) {
    !shallowEqual(this.props, nextProps)
  }
  render() {
    ...
  }
}

正如我所看到的，您只是在 openAddNewModal 函数中执行setState，并且您没有更改传递给Grid Component的positionGridData。您可以在网格组件中使用 shouldComponentUpdate 功能，并使用旧版道具 shallowCompare ，就像这样：

require(data.table)
dt <- data.table(x = rnorm(10),
                 y = rnorm(10))

dt[, ":=" (rank_x = rank(x, ties.method = "min"),
           rank_y = rank(y, ties.method = "min"))]

shallowEqual 将对值进行浅层比较。有关详细信息，请转到here

当父母重新渲染时如何停止重新渲染子组件

1 个答案: