React 设置图像道具答案

【问题标题】：React Set Image PropsReact 设置图像道具
【发布时间】：2017-11-03 20:05:18
【问题描述】：

大家好，我是 REACT 新手，我正在尝试将我的图像道具传递给 {logo} 有人知道我该如何设置吗？显示123，但我还是错过了图像

    export default class StickyHeader extends React.Component {

  static propTypes = {

  }

  static defaultProps = {

  }

  render() {

    const { logo } = this.props;

    return (
      <header>
        <div className={'logo'}>
          {logo}
        </div>
        <div>123</div>
      </header>
    );
  }
}

<StickyHeader logo={ <img src="http://via.placeholder.com/350x150" alt="" /> }></StickyHeader>

【问题讨论】：

标签： image reactjs src prop

【解决方案1】：

在这种情况下，我会将图像标签放在您的粘性标题组件中，然后仅将徽标 url 作为属性传递，因此您的渲染方法看起来更像这样：

render() {
    const { logoUrl } = this.props;

    return (
      <header>
        <div className={'logo'}>
          <img src={logoUrl} />
        </div>
        <div>123</div>
      </header>
    );
  }
}

然后是你的用法 -

<StickyHeader logoUrl={'http://via.placeholder.com/350x150'} />

【讨论】：