相关疑难解决方法(0)

我试图根据其类型动态呈现组件.

例如:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

我尝试了这里提出的解决方案React/JSX动态组件名称

这在编译时给了我一个错误(使用browserify for gulp).它期望我使用数组语法的XML.

我可以通过为每个组件创建一个方法来解决这个问题:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但这对我创建的每个组件都意味着一种新方法.必须有一个更优雅的解决方案来解决这个问题.

我对建议很开放.

我知道通过添加属性命名react组件被认为是一种很好的做法displayName,但不确定我知道为什么.在反应文档中,它说:

displayName字符串用于调试消息.JSX自动设置该值; 请参阅深度中的JSX.

为什么这么重要？如果我不添加它将会发生什么？(到目前为止,我没有它,并没有调试问题)

是否有关于如何命名组件的任何建议/良好实践？

我有以下内容：

import {shallow} from "enzyme" 

const wrapper = shallow(<SampleComponent/>);

如何查看包装器的内容？

我试图测试通过简单的布尔值更新状态时，是否在父组件中正确渲染了其子组件。在父组件下面：

class Parent extends Component {
  ...
  render() {
    const { ..., isReady } = this.state;
    const props = { ... };

    return(
      <div className="container page-content">

        { isReady ?
          <Child {...props} />
          :
          <div id="loader-wrapper">
            <div id="loader"></div>
          </div>
        }

      </div>
    );
  }
}

我的测试是：

beforeEach(() => {
      wrapper = mount(<Parent isReady={true}/>);
    });

it('Should render Child component', () => {
      expect(wrapper.prop('isReady')).to.equal(true); // Working !!
      expect(wrapper.find(Child).length).to.equal(1); // Not Working -> equal 0
    });

到目前为止，我再次检查了状态是否正确更改，当我检查包装程序的isReady状态时，这似乎是正确的。我很确定这部分工作正常。

我也尝试了wrapper.html（），即使isReady为true，我的加载程序也只能看到div部分。<form>..</form>永远不会呈现应为a的Child组件。因此，如果我尝试类似的操作：expect(wrapper.find('form').length).to.equal(1);则两者都不起作用。我不明白为什么。

此处的最佳实践应该是什么，以测试我的父母行为并查看我的子组件是否正确呈现？

更新：

1 …