Question

在我的反应应用程序中，我有一个使用react-redux connect导出的组件。

class Test extends Component {
...
}
export default connect(...)(Test)

并使用组件：

<div>
<Test />
</div>

只要我在同一个文件中导出它，一切都运行正常。由于测试问题，我将连接移动到不同的文件。现在它就像：（Test.js）

class Test extends Component {
...
}
export default Test

并在不同的文件（TestConnect.js）中：

import Test from './Test'
...
export default connect(...)(Test)

并使用组件：

<div>
<TestConnect />
</div>

只要我将Component及其连接放在同一个文件中，更改道具就会重新呈现Test组件。现在不是。你能帮我理解一下吗？我该如何解决这个问题？

修改

使用{pure：false}解决连接中的“选项”！

Answer 1

除非您实际面临边缘情况并且这是唯一的出路，如redux's troubleshooting section中所述，使用{pure: false}并非最佳解决方案，因为redux期望您的组件是纯粹的（在props和states相同的情况下，始终产生相同的结果）

我是这样做的：

<强> Test.js

class Test extends Component {
  ...
  render() { ... } 
}
export default Test

<强> TestContainer.js

import Test from './Test'
import connect from 'react-redux'

class TestContainer extends Component {
  render() {
    return(<Test {...this.props} /> (Don't forget to pass your props down, otherwise, Test won't work properly)
  }
}

TestContainer = connect(...)(Test)
export default TestContainer

<强> App.js

import TestContainer from './TestContainer'

class App extends Component {
  ...
  render(){
    return(
      <div>
        <TestContainer {...props (If you need to pass anything that isn't at redux store)} />
      </div>
    )
  }
}

我在一些项目中使用过这种方法很多次，而且效果很好

如果你不处于边缘情况并且这个解决方案仍然不起作用，需要更多信息来查看出现问题的地方：）

移动连接到不同文件后，React组件未被重新呈现

1 个答案: