Styled Components ব্যবহার করে React-এ শর্তসাপেক্ষ রেন্ডারিং-এ প্রপ্স ব্যবহার

প্রপ্স শর্তসাপেক্ষ রেন্ডারিং-এর জন্যও ব্যবহার করা যেতে পারে। আমরা আগের পাঠে যে React কম্পোনেন্ট Block নিয়ে কাজ করেছি সেটা নেওয়া যাক।

আমাদের প্রথম ইনপুটটির ব্যাকগ্রাউন্ড হলুদ এবং অন্যান্য ইনপুটগুলির জন্য সবুজ করা যাক। এটি করতে, Input কম্পোনেন্টের স্টাইলে আরও একটি লাইন যোগ করুন এবং এটি হবে:

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

প্রথম ইনপুটটিতে first প্রপ্স যোগ করা যাক:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>