用React搭建函数组件父子组件传参的有效策略

2023-10-20 09:49:45

React函数组件传参策略

在React中，函数组件是一种声明式组件，它使用函数来定义组件的渲染逻辑。与类式组件不同，函数组件没有状态和生命周期方法，因此参数传递方式也存在差异。

使用props传递参数

props是函数组件接收参数的标准方式。props是一个JavaScript对象，它包含了父组件传递给子组件的所有数据。子组件可以通过this.props访问props对象。

function ChildComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

在父组件中，可以使用<ChildComponent>标签来渲染子组件，并在标签中传递props对象。

function ParentComponent() {
  const title = 'React函数组件传参';
  const content = '本文介绍了函数组件中子组件向父组件传参的有效策略。';

  return (
    <div>
      <ChildComponent title={title} content={content} />
    </div>
  );
}

使用函数定义传递参数

除了使用props对象传递参数外，还可以使用函数定义来传递参数。这种方法通常用于将子组件的函数传递给父组件。

function ChildComponent() {
  const handleClick = () => {
    console.log('子组件按钮被点击了！');
  };

  return (
    <div>
      <button onClick={handleClick}>子组件按钮</button>
    </div>
  );
}

function ParentComponent() {
  const handleChildClick = (e) => {
    console.log('父组件收到了子组件按钮的点击事件！');
  };

  return (
    <div>
      <ChildComponent handleClick={handleChildClick} />
    </div>
  );
}

使用组件式编程传递参数

组件式编程是一种将组件组织成树状结构的编程范式。在组件式编程中，子组件可以访问父组件的状态和方法。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

    this.handleIncrementCount = this.handleIncrementCount.bind(this);
  }

  handleIncrementCount() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} incrementCount={this.handleIncrementCount} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>计数：{this.props.count}</h1>
        <button onClick={this.props.incrementCount}>增加计数</button>
      </div>
    );
  }
}

子组件调用父组件方法

在React中，子组件可以通过两种方式调用父组件的方法：

使用回调函数
使用ref

使用回调函数调用父组件方法

回调函数是一种在子组件中定义的函数，它可以在父组件中被调用。父组件可以通过props将回调函数传递给子组件。

function ChildComponent(props) {
  const handleClick = () => {
    props.incrementCount();
  };

  return (
    <div>
      <button onClick={handleClick}>子组件按钮</button>
    </div>
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent incrementCount={incrementCount} />
    </div>
  );
}

使用ref调用父组件方法

ref是一种可以在React组件中创建对DOM元素或其他React组件的引用的对象。子组件可以通过ref访问父组件的实例，并调用父组件的方法。

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.parentRef.current.incrementCount()}>子组件按钮</button>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.parentRef = React.createRef();
  }

  incrementCount = () => {
    console.log('父组件计数增加！');
  };

  render() {
    return (
      <div>
        <ChildComponent parentRef={this.parentRef} />
      </div>
    );
  }
}

父组件调用子组件方法

父组件可以通过两种方式调用子组件的方法：

使用ref
使用子组件的公共API

使用ref调用子组件方法

父组件可以通过ref访问子组件的实例，并调用子组件的方法。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.childRef = React.createRef();
  }

  incrementCount = () => {
    this.childRef.current.incrementCount();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  incrementCount = () => {
    console.log('子组件计数增加！');
  };

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>子组件按钮</button>
      </div>
    );
  }
}

使用子组件的公共API调用子组件方法

子组件可以提供公共API，以便父组件可以调用子组件的方法。

class ChildComponent extends React.Component {
  incrementCount = () => {
    console.log('子组件计数增加！');
  };

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>子组件按钮</button>
      </div>
    );
  }
}

function ParentComponent() {
  const childRef = React.createRef();

  const incrementChildCount = () => {
    childRef.current.incrementCount();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={incrementChildCount}>父组件按钮</button>
    </div>
  );
}