私は角度のある世界から来て、Reactにかなり慣れていません。コンポーネントを動的にロードして searchType プロパティを指定する必要があるシナリオがあります。エンド ユーザーには、選択できる searchTypes のドロップダウンが表示されます。この prop は、送信ボタンをクリックした後に渡されます。
の値に応じて適切なコンポーネントを動的にロードする必要があるSearchResultsコンポーネントを定義しました。this.props.searchType.name
import React, { findDOMNode, Component, PropTypes } from 'react';
import Material from './Material'; // Material Search Results Component
import Vendor from './Vendor'; // Vendor Search Results Component
export default class SearchResults extends Component {
constructor(props){
super(props);
}
// searchType = {
// name: 'Material',
// id: 'MATERIAL'
// }
render() {
const { searchType, items, itemsCount } = this.props;
var ComponentName = searchType.name;
return (
<div className='row'>
<h1>Search Results ({items.length}/{itemsCount})</h1>
<ComponentName items={items} />
</div>
);
}
}
SearchResults.propTypes = {
items: PropTypes.array.isRequired
};
現在、クロムで React Dev Tools を使用すると、プロバイダー/コンポーネントが DOM に表示されるのを見ることができるため、これは部分的に機能しているようですが、レンダリングされません。
ここから次にどこに行くべきか、または何か間違っているかどうかはわかりません。