组件与组件通信及Props的6种使用场景

2023-09-26 22:49:43

Props：实现 React 组件高效通信的强大工具

在 React 中，组件之间的顺畅通信至关重要。Props（属性）作为一种核心机制，允许父组件向子组件传递数据，赋能构建复杂且响应迅速的用户界面。让我们深入探讨 Props 的六大常见使用场景，帮助你掌握这种强大工具的妙用。

1. 动态适配文字大小

当我们在不同设备上显示文字时，确保其自适应屏幕尺寸至关重要。Props 可以完美解决此问题。通过向组件传递动态字体大小，我们可以让文字在所有设备上都能清晰易读。

const App = () => {
  const fontSize = useWindowSize();

  return (
    <div>
      <p style={{ fontSize: fontSize }}>
        欢迎来到我的世界！
      </p>
    </div>
  );
};

const useWindowSize = () => {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return size;
};

2. 保持内容一致性

在不同页面或组件中显示相同内容时，保持一致性是十分必要的。Props 可以帮助我们在不同位置共享数据，确保内容始终保持最新和准确。

const App = () => {
  const content = "欢迎来到我的世界！";

  return (
    <div>
      <Header content={content} />
      <Footer content={content} />
    </div>
  );
};

const Header = ({ content }) => {
  return (
    <div>
      <h1>{content}</h1>
    </div>
  );
};

const Footer = ({ content }) => {
  return (
    <div>
      <p>{content}</p>
    </div>
  );
};

3. 提高组件复用性

组件复用是 React 开发中的关键概念，它可以大大减少代码重复，提升开发效率。通过将组件的不同功能抽象为可重用的 Props，我们可以轻松地在多个组件中使用它们。

const Button = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
};

const App = () => {
  return (
    <div>
      <Button text="按钮 1" onClick={() => {
        console.log("按钮 1 被点击了！");
      }} />
      <Button text="按钮 2" onClick={() => {
        console.log("按钮 2 被点击了！");
      }} />
    </div>
  );
};

4. 传递简单数据

在组件之间传递简单数据是常见场景。Props 允许父组件将数据传递给子组件，从而实现数据共享。

const App = () => {
  const data = {
    name: "John Doe",
    age: 30,
  };

  return (
    <div>
      <Child data={data} />
    </div>
  );
};

const Child = ({ data }) => {
  return (
    <div>
      <p>姓名：{data.name}</p>
      <p>年龄：{data.age}</p>
    </div>
  );
};

5. 实现父子组件传值

除了传递数据，Props 还可以实现父子组件之间的双向数据流。子组件可以通过 Props 更新父组件中的数据。

const App = () => {
  const data = {
    name: "John Doe",
    age: 30,
  };

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <Child data={data} onChange={handleDataChange} />
    </div>
  );
};

const Child = ({ data, onChange }) => {
  const [newData, setNewData] = useState(data);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setNewData({ ...newData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onChange(newData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" value={newData.name} onChange={handleChange} />
        <input type="number" name="age" value={newData.age} onChange={handleChange} />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

6. 共享复杂数据

当需要在组件之间共享复杂数据结构时，Props 同样大显身手。它可以传递嵌套对象或数组，方便数据在组件间高效流动。

const App = () => {
  const data = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main Street",
      city: "New York",
      state: "NY",
      zip: "10001",
    },
  };

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <Child data={data} onChange={handleDataChange} />
    </div>
  );
};

const Child = ({ data, onChange }) => {
  const [newData, setNewData] = useState(data);

  const handleChange = (event) => {
    const { name, value } = event.target;
    const updatedData = { ...newData };
    if (name.includes(".")) {
      const [firstKey, secondKey] = name.split(".");
      updatedData[firstKey][secondKey] = value;
    } else {
      updatedData[name] = value;
    }
    setNewData(updatedData);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onChange(newData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" value={newData.name} onChange={handleChange} />
        <input type="number" name="age" value={newData.age} onChange={handleChange} />
        <input type="text" name="address.street" value={newData.address.street} onChange={handleChange} />
        <input type="text" name="address.city" value={newData.address.city} onChange={handleChange} />
        <input type="text" name="address.state" value={newData.address.state} onChange={handleChange} />
        <input type="text" name="address.zip" value={newData.address.zip} onChange={handleChange} />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};