如何从javascript访问反应内联样式

Question

我正在重新利用一系列反应组件，并且我想更改它们生成的内联样式。例如，我如何 console.log 反应组件的内联样式？

编辑：下面的代码 sn-p：

const pieces = this.props.pieces.map((decl, i) => {
  const isMoving = draggingPiece && i === draggingPiece.index;
  const { x, y, piece } = decode.fromPieceDecl(decl);
  const Piece = pieceComponents[piece];

  return (
    <Draggable
      bounds="parent"
      position={{ x: 0, y: 0 }}
      onStart={this.handleDragStart}
      onDrag={this.handleDrag}
      onStop={this.handleDragStop}
      key={`${piece}-${x}-${y}`}
      >
      <Piece isMoving={isMoving} x={x} y={y} />
    </Draggable>
  );
});

console.log(pieces[8].style) // error

Answer 1

我不认为你可以。至少不是来自该组件的外部。

在您的代码中，pieces[8] 是一个渲染 JSX 的函数，而不是渲染的结果。所以任何内联样式都不会被渲染。

最好的办法是进入Piece 组件的代码，然后console.log 退出创建这些内联样式的变量。