react 父子传参

在 React 中，父组件向子组件传递参数可以通过 props 实现。下面是一个简单的示例：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from parent';

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

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};

export default ChildComponent;

在上面的示例中，父组件通过将值 `Hello from parent` 作为 `data` 属性传递给子组件 `<ChildComponent />`。子组件通过 `props` 对象接收父组件传递的参数，并在组件内部使用。

这样，子组件就可以在自己的函数体内使用 `props.data` 来获取父组件传递的值。

相关问题

react 父子产传参

React中父子组件之间传递参数有两种方式：props和context。

1. Props传递：父组件可以通过props将数据传递给子组件。在父组件中，通过在子组件标签上添加属性来传递数据。在子组件中，通过this.props来获取传递过来的数据。

父组件：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const data = 'Hello from parent';
    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

export default ParentComponent;

子组件：

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.data}</p>
      </div>
    );
  }
}

export default ChildComponent;

2. Context传递：Context可以在组件树中直

React 父子组件传参

在 React 中，父组件可以通过 props 将数据传递给子组件。子组件可以通过 this.props 访问这些数据。如果需要在子组件中修改这些数据，可以通过在父组件中定义一个函数，将这个函数作为 props 传递给子组件，在子组件中调用这个函数来修改父组件中的数据。

例如，父组件中定义了一个名为 name 的 state，然后将它作为 props 传递给子组件：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John'
    };
  }

  render() {
    return (
      <ChildComponent name={this.state.name} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        My name is {this.props.name}.
      </div>
    );
  }
}