Question

我有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);

Answer 1

我假设您正在寻找条件渲染，对于您而言，条件渲染将是：

render({ array.length && <First array={array} /> }, form);
render({ array.length && <Second array={array} /> }, document.body);

Answer 2

对于数组为空的情况，您可以使用ternary conditional operator，安全的操作是测试数组的存在和空白：

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

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

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

我是否需要对React组件使用继承？

2 个答案: