javascript - 在组件中 react 显示图像

Question

我是 React 的新手，抱歉，如果这太基础了。

我正在尝试在组件 Position.jsx 上显示图像:

import React from "react";
import "./Position.css";

const isOperator = val => {
  return !isNaN(val) || val === "." || val === "=";
};

export const Position = props => (
  <div
    className={`button-wrapper ${
      isOperator(props.children) ? null : "operator"
    }`}
    onClick={() => props.handleClick(props.children)}
  >
    {props.children}
  </div>
);

---

我正在尝试从另一个组件 Field.jsx 的 render() 中执行此操作:

import "./Position.css";
import { Position } from "./Position";

...

getPositionData = val => {
    this.setState({ positions: this.state.positions};
  }

render() {
return (
 <div className="app">
    <div className="calc-wrapper">
      <Input input={this.state.input} />
      <div className="row">
        <Position 
            src='https:my-url.png' 
            handleClick={this.getPositionData}>
        </Position>
      </div>
      </div>
    </div>
  </div>
);

---

点击组件有效，但没有显示图像。我错过了什么？

Answer 1

你错过了 <img>元素。

你可能想做:

        <Position handleClick={this.getPositionData}>
            <img src='https://my-url.png' alt='image' />
        </Position>

<img>元素作为子元素传递给 Position组件。