javascript - 如何从javascript访问 react 内联样式

Question

我正在重新调整一组 React 组件的用途，我想更改它们生成的内联样式。例如，我如何通过 console.log 记录 React 组件的内联样式？

编辑:下面的代码片段:

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 输出创建这些内联样式的变量。