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

Question

假设我将我的商店状态映射到这样的道具:

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

我需要在渲染中创建变量,如:

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

但是,在我的render方法中,我还调用另一个需要相同变量的方法.所以我可以:

(1)从渲染方法传递它,如:

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

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

(2)在不干的情况下重新声明它们someothermethod().

(3)创建一个返回所需值的函数,并在需要的地方调用它,如:

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

  return somenestedlist;
}

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

Answer 1

您可以在mapStateToProps中转换somenestedlist:

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

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

Answer 2

如果您的意思是要在特定组件中使用变量，您可以使用以下选项：

1.使用道具

2.使用状态

3.在组件内声明一个变量

4.为组件使用 store 并在 store 内声明变量并将 store 传递给您的组件

5......

如果您的意思是要在多个组件中使用特定变量，您可以使用以下选项：

1.声明父组件或基础组件并在其中声明变量并通过 props 将其传递给子组件

2.您可以为多个组件使用特定的存储并在其中声明变量

3....

但在复杂情况下使用变量要小心，错误的使用很容易降低你的项目性能

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