プロパティを持つJSX動的タグ

Question

私はsystemStatusのコンポーネントのフォルダを持っています。

import React from 'react' 
import * as SystemStatus from './systemStatus' 

export default ({ 
    name, 
    state, 
    component 
}) => { 
    const CustomTag = `SystemStatus.${component}`; 
    return (
     <div className="row"> 
      <SystemStatus.UserCount {...{name, state}} /> 
      {/*<CustomTag {...{name, state}}/>*/} 
     </div> 
    ); 
} 

その仕事は、名前のコンポーネントの行をロードすることです：

export UserCount from './UserCount' 

私はこのようになりますStatusという名前JSXコンポーネントを持っている：彼らはこのようなindex.jsファイルで公開されています。うまく<SystemStatus.UserCount {...{name, state}} />作品を通じてUserCountコンポーネントをロード

インポートからリアクト「反応」

export default ({ 
    name, 
    state 
}) => { 
    return (
     <div> 
      <div className="col-md-3">{name || 'Name is missing.'}</div> 
      <div className="col-md-3"> 
       {state ? state.count : 0} 
      </div> 
     </div> 
    ); 
} 

：

は、私は、このようになりますUserCountという名前のコンポーネントを持っています。私はCustomTagを使用してみた場合しかし、私はこのエラーを取得する：

Unknown prop state on tag. Remove this prop from the element.

にはどうすれば変数を活用し、これらの特性に沿って渡すことができますか？それらを別々にエクスポートする必要がありますか？

Answer 1

CustomTagを間違って割り当てていると思います。実際のコンポーネント関数に設定する場合は、文字列に設定するだけです。

これを試してみてください：

const CustomTag = SystemStatus[component];