javascript - 子组件需要一个变量，然后父组件随时修改这个变量，应该如何实现呢？

Question

我们在封装组件的时候，
比如：
在使用组件的时候：

<MyComp 
  data={xxx}
  callback={myFun}
/>

但是我想要在这样定义运行之后，给子组件传递参数，因为随时都会给子组件传递。请问应该怎么传递呢？
是使用props里面添加的一个参数？还是怎么做的呢？

Answer 1

子组件props接收，再使用watch监听即可

Answer 2

可以用 CustomEvent

父组件：

const eventName = Math.random().toString(36).slice(2) // 随机字符串

useEffect(() => {
    setTimeout(() => {
        const detail = {} // 需要传递的参数
        dispatchEvent(new CustomEvent(eventName, { detail }))
    }
}

return <MyComp eventName={eventName} />

子组件：

const [state, setState] = useState()

useEffect(() => {
    const listener = e => setState(e.detail)
    addEventListener(props.eventName, listener);
    return () => removeEventListener(props.eventName, listener)
}, [setState, props.eventName])

return <p>{ state }</p>

Answer 3

在React中，如果你想要父组件能够随时修改子组件中的某个变量，并且这个修改能够反映到子组件上，你通常会通过props来实现这一点。但是，由于props是单向数据流（即只能从父组件流向子组件），你不能直接在子组件中修改通过props传递进来的变量。相反，你需要在父组件中修改这个变量的值，并通过props将这个新的值传递给子组件。

方法一：使用状态（State）和Props

在父组件中，你可以使用状态（state）来存储这个变量，然后通过props将这个状态传递给子组件。当需要修改这个变量的值时，你可以在父组件中更新这个状态，React会自动重新渲染子组件，并传递新的props值。

父组件示例：

import React, { useState } from 'react';
import MyComp from './MyComp';

function ParentComponent() {
  const [data, setData] = useState('初始数据');

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

  return (
    <div>
      <MyComp data={data} />
      <button onClick={() => updateData('新的数据')}>更新数据</button>
    </div>
  );
}

export default ParentComponent;

子组件示例 (MyComp.js)：

import React from 'react';

function MyComp({ data }) {
  return <div>{data}</div>;
}

export default MyComp;

方法二：使用回调函数

如果你需要在子组件中直接触发父组件中状态的更新（即子组件“告诉”父组件去更新状态），你可以通过props传递一个回调函数给子组件。

父组件示例（修改后的）：

import React, { useState } from 'react';
import MyComp from './MyComp';

function ParentComponent() {
  const [data, setData] = useState('初始数据');

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

  return (
    <div>
      <MyComp data={data} updateData={updateDataFromChild} />
    </div>
  );
}

export default ParentComponent;

子组件示例 (MyComp.js)（修改后的）：

import React from 'react';

function MyComp({ data, updateData }) {
  const handleLocalUpdate = () => {
    // 假设这是某种逻辑来决定新的数据
    const newData = '从子组件发送的新数据';
    updateData(newData);
  };

  return (
    <div>
      <p>{data}</p>
      <button onClick={handleLocalUpdate}>更新数据（由子组件触发）</button>
    </div>
  );
}

export default MyComp;

这样，无论你在何时何地需要更新子组件中的变量（实际上是通过父组件的状态来控制），你都可以通过更新父组件的状态，并通过props将新的状态传递给子组件来实现。