时间戳

首页 > 解决方案 > 我需要对反应组件使用继承吗？

javascript - 我需要对反应组件使用继承吗？

问题描述

我有 2 个组件，它们可以获得一些对象数组的道具。我在渲染这些组件之前生成的这个对象数组。如果对象数组为空，我不需要显示这些组件。

我有改变我的数组的事件监听器。所以我不想在每个组件中添加这个事件监听器。我该如何优化呢？

class First extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: props.array
    };
  }

  componentDidMount() {
    element.addEventListener('change', () => {
       this.setState({ array: newArray })
    }
  }

  render() {
    if (this.state.array.length >0) {
       return 'First'
    }
  }
}

class Second extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: props.array
    };
  }

  componentDidMount() {
    element.addEventListener('change', () => {
       this.setState({ array: newArray })
    }
  }

  render() {
    if (this.state.array.length >0) {
       return 'Second'
    }
  }
}


const array = initializeArray()
const form = document.querySelector("form[action='/add']")
render(<First array={array} />, form);
render(<Second array={array} />, document.body);

标签： javascriptreactjs

解决方案

对于数组为空的条件，你可以使用三元条件运算符，安全操作是测试数组的存在和空：

array && array.length > 0 ? <First array={array} /> : undefine

对于事件侦听器，您可以在第三个组件中实现它，该组件位于您已经拥有的其他两个组件之上，该组件将管理数组的状态并通过 props 将其传递给其他组件。

您还可以使用库来简化操作，使用react-globally您可以全局设置状态并在任何地方访问它们。使用三元选项，但this.props.globalState.array您甚至不需要componentDidMount.

推荐阅读