Question

假设我正在将商店状态映射到道具，例如：

const mapStateToProps = state => {
    return {
        somelist: state.somelist
    };
};

我需要在渲染器中创建变量，例如：

render() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;
}

但是，在我的render方法中，我还调用了另一个需要相同变量的方法。所以我可以：

（1）从render方法传递它，例如：

render() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;

  <div onClick={()=>this.someothermethod(somenestedlist)}
}

（2）在someothermethod()（不是DRY）中重新声明它们。

（3）创建一个返回所需值的函数，并在需要的地方调用它，如：

getList() {
  const { somelist } = this.props;
  const somenestedlist = somelist.list;

  return somenestedlist;
}

或者有没有比这些示例更好的方法？

Answer 1

您可以在mapStateToProps中转换某嵌套列表：

const mapStateToProps = state => {
    return {
        somelist: state.somelist,
        somenestedlist: state.somelist.list
    };
};

在任何地方，您都可以使用this.props.somenestedlist

Answer 2

如果您不想在使用的每个函数中重新声明变量，那么...我认为您唯一的选择是直接使用props中的值...

然后，执行以下操作：

yourMethod(){
    //Do somethign with data directly, no need to declare a const again
    this.anotherMethod(this.props.somelist.list);
}

代替：

const { somelist } = this.props;
const somenestedlist = somelist.list;

我的意思是，这些值已经对所有方法可用，只需使用它们即可... const { somelist } = this.props;仅用作辅助方法，而不是在整个方法中都写this.props.somelist。

Answer 3

如果您想在特定组件中使用变量，则可以使用以下选项：

1。使用道具

2。使用状态

3。在组件内部声明一个变量

4。将存储用于组件并在存储内声明变量，然后将存储传递给组件

5 .....

如果您想在多个组件中使用特定变量，则可以使用以下选项：

1。声明父组件或基础组件，并在其中声明变量，然后通过prop将其传递给子组件

2。您可以将特定存储用于多个组件，并在其中声明变量

3 ....

但是在复杂情况下使用变量时要小心，因为错误使用它很容易降低项目性能

您还可以使用observable属性进行更改并命令自动重新渲染

Answer 4

您可以在mapStateToProps的对象中构造somelist和somelist.list并返回该对象。像下面这样

const mapStateToProps = state => {
    const obj = {};
    obj.somelist = state.somelist;
    obj.someNestedList = state.somelist.list;
    return {
        list: obj
    };
};

在渲染中，您可以从列表道具对象获取somelist和someNestedList，而无需分配给局部变量。像下面这样

 someothermethod = list => {
      console.log(list.someList);
      console.log("someNestedList", list.someNestedList);
 }
 render() {
      const { list } = this.props;
      console.log("somelist", list.somelist);
      console.log("someNestedList", list.someNestedList);
      return(
         <div onClick={()=>this.someothermethod(list)}></div>
      )
    }

如何使变量可用于组件中的每个方法？

4 个答案: