React:如何使子组件在父组件更改时从数组中呈现？

在React中，可以通过使用状态（state）和props来实现子组件在父组件更改时从数组中呈现的功能。

首先，在父组件中定义一个数组作为状态，并将其传递给子组件作为props。例如：

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState(['item1', 'item2', 'item3']);

  const handleDataChange = () => {
    // 在这里更改父组件的数据
    setData(['item4', 'item5', 'item6']);
  };

  return (
    <div>
      <button onClick={handleDataChange}>更改数据</button>
      <ChildComponent data={data} />
    </div>
  );
}

function ChildComponent(props) {
  const { data } = props;

  return (
    <div>
      {data.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

export default ParentComponent;

在上面的例子中，父组件ParentComponent中定义了一个名为data的状态，并将其传递给子组件ChildComponent作为props。当点击按钮时，调用handleDataChange函数来更改父组件的数据。子组件通过map方法遍历data数组，并将每个元素渲染为<p>标签。

这样，当父组件的数据发生变化时，子组件会重新渲染，并从新的数组中呈现数据。

在实际应用中，React的这种数据流动方式可以用于各种场景，例如展示动态列表、实时更新数据等。

腾讯云相关产品和产品介绍链接地址：