bugfix> reactjs > 投稿

Reactの天才にとって、これは簡単です。私にとって、このようなことを学ぶことはそれほど多くありません...しかし、私は試してみます:)ここに私がやろうとしていることがあります

私は小さな再利用可能なコンポーネントを構築しており、コンポーネントのプロパティを制御するために小道具を渡すことに成功していますが、私を避けているのはクラスです。以下のコンポーネントを参照してください

const CMLabel = ({ classes, children, ...otherProps }) => {
    return (
        <FormLabel 
            component="label" 
            {...otherProps}
            className={classes.label}>
            {children}
        </FormLabel>
    );
};

これは次のように使用できます

<CMLabel>Hello World </CMLabel>

そして、次のように、コンポーネント内で指定されたラベルクラスでレンダリングされます。

<label class="label">Hello World </label>

ただし、次のように使用できるように、より自由にしたいと思います。

<CMLabel className="myClass">Hello World </CMLabel>

そして、このようにレンダリングします(コンポーネントのラベルとコンポーネントの使用中に追加されたmyClass):

<label class="label myClass">Hello World </label>

ラベルクラスと、入力することを選択した追加のクラスをレンダリングするように、その機能を小道具に追加するにはどうすればよいですか?私はそれが... otherPropsがどのように機能するかを望んでいましたが、私はそれを機能させていません。 className={} 内で... otherPropsをカスケードする必要がありますか ?どうやって?

回答 1 件
  • あなたは正しい道を進んでいます。不足しているのは、コンポーネントpropsを介して指定されたclassNameにデフォルトのclassNameをマージすることです。できることは、クラス名の配列を作成し、すべての追加のクラス名をその配列にプッシュすることです。このように。

    const CMLabel = (props) => {
        const classNames = [props.classes.label];
        if (props.className) {
            classNames.push(props.className);
        }
        return (
            <FormLabel 
                component="label" 
                className={classNames.join(' ')} >
                {props.children}
            </FormLabel>
        );
    };
    
    

あなたの答え