[解決済み] React テキストを挟んだ横長の仕切りを作る
2022-01-28 14:49:38
質問
テキストのようなコンテンツを挟む、水平方向の仕切りであるReactコンポーネントを作成する必要があります。私がオンラインで持っているすべてのリソースは、私がこれを成し遂げるのを助けることができません。私は、以下の例のように、Dividerコンポーネントを作成し、間にテキストを配置することによって、Material-UI Dividerを試してみました。
<Divider>Or</Divider>
でも、エラーが出るんです。
hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
下の画像で実現したいのですが。
何かお手伝いできることがあれば、お願いします。
以下は私のコードです。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function ListDividers() {
const classes = useStyles();
return (
<List component="nav" className={classes.root} aria-label="mailbox
folders">
<Divider>Or</Divider>
</List>
);
}
解決方法は?
ここでは、あなたができることのカスタム例を紹介します。 スタックブリッツで再現
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const App = () => {
return <Divider>Or</Divider>;
};
const Divider = ({ children }) => {
return (
<div className="container">
<div className="border" />
<span className="content">
{children}
</span>
<div className="border" />
</div>
);
};
render(<App />, document.getElementById("root"));
そしてCSS。
.container{
display: flex;
align-items: center;
}
.border{
border-bottom: 1px solid black;
width: 100%;
}
.content {
padding: 0 10px 0 10px;
}
関連
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】Reactを使用したMapBoxのCSSが欠落している件
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。