小编Her*_*aro的帖子

我正在尝试为图像添加内部阴影,但我无法得到我想要的结果.

这是我目前的情况:

https://codepen.io/nvision/pen/lBKEy

.shadow {
  display: inline-block;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}

.shadow img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

问题是图像底部和实际内部阴影之间的浅灰色填充.我想要的是根本没有填充物.只是一个内在的阴影,就是这样.

这是我想要实现的一个例子:

我有一个大型应用程序，我正在使用 Next.js 构建用于 SEO 和性能目的，并且该应用程序的一个超级交互部分需要文本编辑器（例如 Quill.js 或 Draft.js），其中的数据位于使用 Socket.io 在两个用户之间同步。

问题是我无法让文本编辑器与 Next.js 一起工作。

当我导入 Quill 时，它显示“文档未定义”，因为服务器上没有文档。使用 Draft.js，它根本不渲染任何东西，但没有错误。

这是我的 Draft.js 代码：

import { EditorState, convertToRaw, convertFromRaw } from 'draft-js'


class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createWithContent(convertFromRaw(props.contentState))
    }
  }
  static async getInitialProps ({ query, req }) {
    return { contentState: convertToRaw(EditorState.createEmpty().getCurrentContent()) }
  }
  render() {
    console.log('init',this.props.editorState);
    return (
      <div>
        <h1>Test Editor</h1>
        <Editor
          editorState={ this.props.editorState }
        />
      </div>
    );
  }
}

有什么帮助吗？

我想创建一个画布，用户可以在其中使用鼠标绘制箭头。

我想要完成的正是这个：https : //jsfiddle.net/w33e9fpa/

但我不明白如何将其转换为 React 代码，而且我的实现目前不起作用。当我运行此代码时，似乎在画布的左上角绘制了一个箭头，但如果我单击它，则没有任何反应。

这是我的代码：

class DrawArrow extends Component {

  state = {
    isDrawing: false,
    mode: "brush"
  };

  componentDidMount() {
    const canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 300;
    const context = canvas.getContext("2d");

    this.setState({ canvas, context });
  }


  handleMouseDown = () => {
    this.setState({ isDrawing: true });

    // TODO: improve
    const stage = this.arrow.parent.parent;
    this.lastPointerPosition = stage.getPointerPosition();

    this.setState({
      posX: this.lastPointerPosition.x,
      poxY: this.lastPointerPosition.y
    })

  }

  handleMouseUp = () => {
    this.setState({ isDrawing: false });
  };

  handleMouseMove …