文字列を[オブジェクトオブジェクト]に変換する方法

Question

私はmenuItemコンポーネントを持っていて、その小道具はアイコンというアイコンで作成されました。

menuItem小道具では、アイコンの名前を文字列として渡すことができます（例：leftIcon="face"）。leftIcon='<FontIcon style={{color:"red"}} className="face" />'のようにコンポーネントのコードを渡すこともできます。

leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;

しかし、この第二の方法では動作しません。最初のケースで

は、すべてが完璧に動作し、小道具は、コンポーネントのコードがある変数に渡されます。ユーザーは、私がこれまで（上記のように、このサイズの値を）何かを追加する必要があるすべてのコードを渡し、この時点で、これは作品を追加する場合：

leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");

をここで私は、ユーザーが合格したかどうか確認するためにifを持っています：

if (_props.leftIcon.match(/<.+\/>/)) { 
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>"); 
} else { 
    leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />; 
} 

しかし、この2番目の方法では、私は文字列を取得しているし、動作しません。アイコンはありませんが、コードの文字列があります：

だから私はこれを慰めログきたし、それは私が得たものです：

typeofこの最初はですオブジェクトですが、この2番目は文字列です。

このように2番目の方法で動作させるにはどうすればよいですか？

Answer 1

このコードがレンダリング部分にある場合、これはうまくいくはずです。

if (_props.leftIcon.match(/<.+\/>/)) { 
 
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>"); 
 
} else { 
 
    leftIcon = (<FontIcon size={_props.fontSize} className={_props.leftIcon} />); 
 
}

括弧に注意してください。

Answer 2

ではなく、文字列をコンポーネントにスタイルおよび/またはクラス名とその他のパラメータを渡すためにあなたがthis answer

に見てみることができます。しかし、私はあなたを示唆している文字列からコンポーネントを作成する方法がありますし、その後、あなたは可能性

return <FontIcon class={condition ? 'firstClass' : 'secondClass'} ... />;