react中通过props实现父子组件间通信的使用示例

// 父组件
function ParentComponent() {
  const message = "Hello, World!";

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

// 子组件
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

// 父组件
class ParentComponent extends React.Component {
  render() {
    const message = "Hello, World!";

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

// 子组件
class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

// Parent组件
import React from 'react';
import Child from './Child';

const Parent = () => {
  const propsData = {
    name: 'John',
    age: 25,
    gender: 'male',
    // 更多的props...
  };

  return <Child {...propsData} />;
}

export default Parent;


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

const Child = ({ name, age, gender }) => {
  // 在子组件中直接使用解构赋值方式接收所有的props
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Gender: {gender}</p>
      {/* 更多的渲染内容... */}
    </div>
  );
}

export default Child;

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

function ParentComponent() {
  const [value, setValue] = useState('');

  const handleChildValue = (childValue) => {
    setValue(childValue);
  }

  return (
    <div>
      <ChildComponent onChildValue={handleChildValue} />
      <p>Value from child component: {value}</p>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.onChildValue('Hello from child');
  }

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default ChildComponent;

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

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

  handleChildValue = (childValue) => {
    this.setState({ value: childValue });
  }

  render() {
    return (
      <div>
        <ChildComponent onChildValue={this.handleChildValue} />
        <p>Value from child component: {this.state.value}</p>
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';

class ChildComponent extends React.Component {
  handleClick = () => {
    this.props.onChildValue('Hello from child');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

export default ChildComponent;

import React from 'react';
import PropTypes from 'prop-types';

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

ChildComponent.propTypes = {
  title: PropTypes.string.isRequired, // 限制title必须为字符串类型且必传
  description: PropTypes.string // 限制description为字符串类型，非必传
}

ChildComponent.defaultProps = {
  description: "No description" // 设置description的默认值为"No description"
}

export default ChildComponent;

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

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent title="Hello" description="This is a child component" />
      </div>
    );
  }
}

export default ParentComponent;