在反应中传递道具 - Javascript

在React中，道具是组件中传递数据的一种方法。在某些情况下，您可能需要将这些道具从一个组件传递到另一个组件。这篇文章将向您展示如何在React中传递道具。

从父组件传递道具

传递道具的最常见方式是从一个父组件传递给子组件。在父组件中，您可以将道具作为属性传递给子组件。子组件可以通过this.props对象来访问这些道具。

// Parent Component
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  render() {
    return (
      <ChildComponent name="John" age={30} />
    );
  }
}

// Child Component
import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

在上面的代码中，ParentComponent通过将name和age道具传递给ChildComponent组件来传递数据。ChildComponent使用this.props来访问这些道具，并将它们呈现为名称和年龄。

从子组件传递道具

您也可以从一个子组件传递道具到其兄弟或父组件。为了实现这一点，您需要一个共同的祖先组件，这样就可以将道具从一个子组件传递到另一个子组件。

以下代码演示了如何从一个子组件传递道具到另一个子组件：

// Ancestor Component
import React, { Component } from 'react';
import ChildComponentA from './ChildComponentA';

class AncestorComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "John",
      age: 30
    };
    this.changeName = this.changeName.bind(this);
  }

  changeName() {
    this.setState({name: "Bob"});
  }

  render() {
    return (
      <div>
        <button onClick={this.changeName}>Change Name</button>
        <ChildComponentA name={this.state.name} />
      </div>
    );
  }
}

// Child Component A
import React, { Component } from 'react';
import ChildComponentB from './ChildComponentB';

class ChildComponentA extends Component {
  render() {
    return (
      <ChildComponentB name={this.props.name} />
    );
  }
}

// Child Component B
import React, { Component } from 'react';

class ChildComponentB extends Component {
  render() {
    return (
      <p>Name: {this.props.name}</p>
    );
  }
}

在上面的代码中，AncestorComponent通过将name和age道具传递给ChildComponentA。ChildComponentA将name道具传递给其子组件ChildComponentB。ChildComponentB将name道具呈现为一个段落标记。

当用户点击"更改名称"按钮时，AncestorComponent会更新其状态并更改传递到其子组件中的name道具。当name道具更改时，ChildComponentB将显示更新后的名称。

结论

这篇文章向您展示了在React中传递道具的两个方法。您可以从父组件传递到子组件，或从一个子组件传递到另一个子组件，只要它们共享相同的祖先组件。希望这篇文章对您有所帮助！