Question

我有React组件给了一些道具。道具给出了mapStateToProps。

const mapStateToProps = (state, {props}) => {
    return {
      feeds: props.feeds,
      feedEntries: props.feedEntries,
      ....

用户开始与UI交互后，他们可以更改状态。此时，组件需要使用state而不是props进行自我更新。

const mapStateToProps = (state, {props}) => {
    return {
      feeds: state.feeds,
      feedEntries: state.feedEntries,
      ....

如何引导mapStateToProps函数首次使用首次加载时直接提供给组件的道具。然后，只说明它的数据状态？

Answer 1

使用三元组检查状态属性是否为undefined，并相应地取props值：

const mapStateToProps = (state = {}, props) => {
    return {
      feeds: state.feeds === undefined ? props.feeds : state.feeds,
      feedEntries: state.feedEntries === undefined ? props.feedEntries : state.feedEntries,
      ....

如果您知道属性不会将假值（false，null，0等）作为合法值，则可以使用short-circuit evaluation替换三元：

const mapStateToProps = (state = {}, props) => {
    return {
      feeds: state.feeds || props.feeds,
      feedEntries: state.feedEntries || props.feedEntries,
      ....

Answer 2

我建议您采取另一种方法，而不是使用mapStateToProps函数流中断，您最好从道具中获取内部值，然后由用户更改的值保存在状态，渲染函数应该支持它并检查是否收到了任何用户数据

Answer 3

结束了以下行动......

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    
<script>
    $(".burger").on("click", function () {
        $(".menu").hide();
     // $(".menu").toggle(); // This is more useful
    });
</script>

创建了一个包装createStore函数的函数..它接受一个由1）组成的对象。给予主要组件的道具（initProps）和2）。 export default (initProps) => { const combinedState = { ...defaultState, ...initProps, }; return createStore( reducer, combinedState, applyMiddleware(logger, thunk), ) }; - 使用默认存储形状导入此文件的JS对象，init冒充覆盖defaultProps中的任何值。

defaultProps

主要组件是接受道具，将这些道具传递给配置存储功能。商店使用上面的组合对象构建。

mapStateToProps来自props的初始值，然后只有状态

3 个答案: