警告：ReactDOMComponent：不要访问 DOM 节点的 .props答案

【问题标题】：Warning: ReactDOMComponent: Do not access .props of a DOM node警告：ReactDOMComponent：不要访问 DOM 节点的 .props
【发布时间】：2015-11-30 09:10:43
【问题描述】：

我从新的 React 0.14.x 收到此错误：

Warning: ReactDOMComponent: Do not access .props of a DOM node; instead, recreate the props as `render` did originally or read the DOM properties/attributes directly from this node (e.g., this.refs.box.className).

it('allows for FluxComponents through the tree via context', () => {
  const flux = new Flux();
  const actions = flux.getActions('test');

  class TopView extends React.Component {
    render() {
      return (
        <FluxComponent flux={flux}>
          <SubView />
        </FluxComponent>
      );
    }
  }

  class SubView extends React.Component {
    render() {
      return <SubSubView />;
    }
  }

  class SubSubView extends React.Component {
    render() {
      return (
        <FluxComponent connectToStores="test">
          <div />
        </FluxComponent>
      );
    }
  }

  const tree = TestUtils.renderIntoDocument(
    <TopView />
  );

  const div = TestUtils.findRenderedDOMComponentWithTag(tree, 'div');

  actions.getSomething('something good');
  expect(div.props.something).to.equal('something good');
});

在我的情况下获取道具和上下文的正确方法是什么？

组件看起来像：

import React from 'react';
import { instanceMethods, staticProperties } from './reactComponentMethods';
import assign from 'object-assign';

class FluxComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.initialize();

    this.state = this.connectToStores(props.connectToStores, props.stateGetter);

    this.wrapChild = this.wrapChild.bind(this);
  }

  wrapChild(child) {
    return React.cloneElement(
      child,
      this.getChildProps()
    );
  }

  getChildProps() {
    const {
      children,
      render,
      connectToStores,
      stateGetter,
      flux,
      ...extraProps } = this.props;

    return assign(
      { flux: this.getFlux() },
      this.state,
      extraProps
    );
  }

  render() {
    let { children, render: internalRender } = this.props;

    if (typeof internalRender === 'function') {
      return internalRender(this.getChildProps(), this.getFlux());
    }

    if (!children) return null;

    if (!Array.isArray(children)) {
      const child = children;
      return this.wrapChild(child);
    } else {
      return <span>{React.Children.map(children, this.wrapChild)}</span>;
    }
  }
}

assign(
  FluxComponent.prototype,
  instanceMethods
);

assign(FluxComponent, staticProperties);

export default FluxComponent;

【问题讨论】：

你的组件是什么样子的？在此处粘贴代码。
@AtanasKorchev 添加了要点
你确定这是产生警告的测试吗？您似乎没有在测试和组件中使用任何 DOM 元素道具。
@AtanasKorchev 哎呀我的错，你说得对，更新了测试规范要点

标签： javascript dom reactjs tdd flux

【解决方案1】：

我建议使用等效的 DOM 属性来避免警告。例如，如果您正在检查 id 属性，请使用 id 属性：

旧：

expect(div.props.id).to.equal('something good');

新：

expect(div.id).to.equal('something good');

【讨论】：

你的意思是创建自定义
元素？
不，只是不要使用 div.props.id - 直接使用 div.id。
在 DOM 组件上是不可能的

【解决方案2】：

所以我找到了一种从 DOM 组件中获取原始 prop 值的解决方案（但对于对象，您将需要 React 组件）。它看起来如下：

it('allows for FluxComponents through the tree via context', () => {
  const flux = new Flux();
  const actions = flux.getActions('test');

  class TopView extends React.Component {
    render() {
      return (
        <FluxComponent flux={flux}>
          <SubView />
        </FluxComponent>
      );
    }
  }

  class SubView extends React.Component {
    render() {
      return <SubSubView />;
    }
  }

  class SubSubView extends React.Component {
    render() {
      return (
        <FluxComponent connectToStores="test">
          <InnerWithData />
        </FluxComponent>
      );
    }
  }

  class InnerWithData extends React.Component {
    render() {
      return (
        <div data-something={this.props.something} />
      );
    }
  }

  const tree = TestUtils.renderIntoDocument(
    <TopView />
  );
  const div = TestUtils.findRenderedDOMComponentWithTag(tree, 'div');

  actions.getSomething('something good');
  expect(div.getAttribute('data-something')).to.equal('something good');
});

这基本上意味着将 prop 值放入 DOM 属性中。

【讨论】：