Question

我是React的新手，所以看起来如何将图像，名称和用户名的数据从一个组件的渲染方法渲染到其他组件。

 class Avatar extends React.Component {
    render() {
       return (
         <img src={''} />
      )
   }
 }

class Label extends React.Component {
  render() {
    return (
      <h1>Name: </h1>
    )
  }
}

class ScreenName extends React.Component {
  render() {
    return (
      <h3>Username: </h3>
    )
  }
}

class Badge extends React.Component {
  render() {
    return (
      <div>
        <Avatar />
        <Label /> 
        <ScreenName />
      </div>
    )
  }
}

渲染方法就是这样。如何将此图像用户名和名称读入其他组件并更新视图。尝试使用{this.props.name}和{this.props.user.name}，但我的名字是未定义的。

ReactDOM.render(
  <Badge user={{
    name: 'Tyler McGinnis',
    img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460',
    username: 'tylermcginnis'
  }} />,
  document.getElementById('app')
);

HTML就是这个

<div id='app'></div>

Answer 1

您通过组件的道具传递数据。它看起来像这样：

class Avatar extends React.Component {
    render() {
       return (
         <img src={this.props.img} />
      )
   }
 }

class Label extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    )
  }
}

class ScreenName extends React.Component {
  render() {
    return (
      <h3>{this.props.username}</h3>
    )
  }
}

class Badge extends React.Component {
  render() {
    return (
      <div>
        <Avatar img={this.props.user.img}/>
        <Label name={this.props.user.name} /> 
        <ScreenName username={this.props.user.username} />
      </div>
    )
  }
}

经过一些重构后，你最终得到了这个：

const Avatar = ({img}) => (
     <img src={img} />
);


const Label = ({name}) => (
    <h1>{name}</h1>
);

const ScreenName = ({username}) => {
    <h3>{username}</h3>
);

const Badge = ({user}) => (
    <div>
        <Avatar img={user.img}/>
        <Label name={user.name} /> 
        <ScreenName username={user.username} />
    </div>
)

请注意，我们在这里使用了所谓的功能无状态组件，它可以使您的代码更短，更常见。请参阅here。

Answer 2

您可以通过道具传递数据 https://codesandbox.io/s/o4nz576jn5

如何将数据从render方法传递到React中的多个组件？

2 个答案: