Penyisipan Data ke dalam Atribut style daripada Pembolehubah dalam React

Dalam pelajaran lepas, kami menulis objek terus dalam atribut style. Kami juga boleh menggunakan penyisipan data ke dalam objek ini daripada pembolehubah.

Mari kita ambil komponen React kami tanpa gaya CSS:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Sekarang kami akan mencipta pembolehubah dan menetapkan nilai sifat CSS kepada mereka. Mari kita mulakan mengikut urutan dengan gaya untuk div.

Dalam fail komponen sebelum arahan return, mari kita cipta pembolehubah wd1 dan tetapkan nilai '200px' kepadanya:

const wd1 = '200px';

Dengan cara yang sama, mari kita cipta pembolehubah untuk semua nilai sifat div kami:

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Sekarang tambahkan pembolehubah untuk perenggan pertama:

const co1 = 'orangered';
const fw1 = 'bold';

Untuk perenggan kedua:

const fs1 = 'italic';
const co2 = 'brown';

Dan akhirnya, untuk yang terakhir. Di sini hanya dua, bukan tiga pembolehubah diperlukan. Tidak masuk akal untuk mengulangi, kerana nilai bold sudah ada untuk perenggan pertama:

const bco1 = 'orange';
const co3 = 'white';

Dan sekarang kami akan menggantikan pembolehubah dengan nilai gaya. Mari lakukan ini untuk perenggan pertama. Mari kita sisipkan pembolehubah co1 dan fw1 sebagai ganti nilai dalam objek:

<p style = {{ color: co1, fontWeight: fw1 }}>
	text
</p>

Dengan cara yang sama, mari kita lakukan dengan tag yang lain.

Hasilnya, kod komponen kami akan kelihatan seperti ini:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	const co1 = 'orangered';
	const fw1 = 'bold';

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				text
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				text
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				text
			</p>
		</div>
	);
}

Ubahsuai kod penyelesaian masalah untuk pelajaran lepas supaya nilai sifat CSS disimpan dalam pembolehubah.