Reactjs学习-组件之间传值

本篇是关于React的基础-父子组件之间传值

• 子组件想使用父组件的某个属性

父组件就需要把这个属性传递给子组件，子组件就可以用this.props.属性名来接收

• 子组件调用父组件的方法

父组件就需要把这个方法以属性的方式传递给子组件，子组件就可以用this.属性名来调用，要注意this指向（可以借用bind)

例如
在类组件中
父组件

 

 子组件

在函数组件中

import { getImageUrl } from './utils.js';

//子组件
function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}
//父组件
export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
    </div>
  );
}