Morioh
Login
CODE VN

CODE VN

9 months ago

Cách sử dụng kiểu nội tuyến trong React.js

Kiểu nội tuyến trong React.js là kiểu CSS được xác định trực tiếp trên các phần tử HTML bằng stylethuộc tính. Thuộc tính này stylelấy một đối tượng JavaScript làm giá trị, trong đó mỗi thuộc tính đại diện cho một quy tắc CSS và giá trị thuộc tính đại diện cho giá trị CSS.

Trong các dự án giao diện người dùng hiếm khi yêu cầu sử dụng ứng dụng một trang, các kiểu nội tuyến của phần tử DOM thường được đặt trong thuộc  style="property:value" tính của phần tử đích. Nhưng trong React, mọi thứ hoàn toàn khác khi nói đến kiểu dáng nội tuyến. Hướng dẫn này tập trung vào cách chính xác để đạt được điều đó bằng cách sử dụng ví dụ thực tế về xây dựng thành phần thẻ hồ sơ người dùng.

Sử dụng kiểu nội tuyến trong JSX

Kiểu nội tuyến được sử dụng khi một phần tử HTML cần có kiểu duy nhất. Bất cứ khi nào có nhiều hơn một phần tử có cùng kiểu dáng, bạn nên sử dụng các lớp CSS để thay thế.

Kiểu nội tuyến không phản ứng cụ thể. Chúng là một tính năng HTML thông thường:

<p style="color: red">CodeGeek</p>

Tuy nhiên, chúng ta phải sử dụng nó hơi khác một chút trong React. Thay vì truyền một chuỗi có tất cả các kiểu cho thuộc tính, chúng ta cần gán một đối tượng:

render() {
    return (
         <p style={{color: 'red'}}>
            CodeGeek
        </p>
    );
}

Lưu ý rằng dấu ngoặc nhọn bên ngoài là cú pháp JSX "đây là JavaScript" thông thường. Dấu ngoặc nhọn bên trong là định nghĩa nội tuyến của một đối tượng mới.

Thay vì xác định nội tuyến đối tượng kiểu, chúng ta cũng có thể xác định một đối tượng trong mã lưu trữ các thuộc tính kiểu.

render() {
  const styles = {
    color: 'blue'
  }

  return (
      <p style={styles}>
        Example Text
      </p>
  );
}

Áp dụng có điều kiện các kiểu nội tuyến

Khi sử dụng kiểu nội tuyến, chúng ta cũng có thể muốn áp dụng hoặc xóa kiểu dựa trên trạng thái của thành phần. Chúng ta có thể dễ dàng thêm các kiểu có điều kiện bằng cách sử dụng toán tử bậc ba.

class App extends Component {
  constructor() {
    super()
    this.state = { isRed: true }
  }

  render() {
    const isRed = this.state.isRed

    return <p style={{ color: isRed ? 'red' : 'blue' }}>Example Text</p>
  }
}

Kiểu nội tuyến

Việc đạt được kết quả tương tự với các kiểu nội tuyến hoạt động hoàn toàn khác nhau. Để sử dụng kiểu nội tuyến trong React, hãy sử dụng thuộc tính style chấp nhận đối tượng Javascript có thuộc tính CamelCase.

function MyComponent(){

  return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>

}

Lưu ý rằng giá trị của phần đệm không có đơn vị vì React gắn thêm hậu tố 'px' vào một số thuộc tính kiểu nội tuyến số. Trong trường hợp bạn cần sử dụng các đơn vị khác, chẳng hạn như 'em' hoặc 'rem', hãy chỉ định đơn vị có giá trị rõ ràng dưới dạng chuỗi. Áp dụng điều đó cho thuộc tính đệm sẽ dẫn đến  padding: '1.5em'. Ngoài ra, các kiểu này không được tự động thêm tiền tố của nhà cung cấp, vì vậy bạn phải thêm tiền tố của nhà cung cấp theo cách thủ công.

Cải thiện khả năng đọc

Khả năng đọc của nó  MyComponent sẽ giảm đi đáng kể nếu có quá nhiều kiểu dáng và mọi thứ trở nên lộn xộn. Vì các kiểu chỉ là các đối tượng nên chúng có thể được trích xuất ra khỏi thành phần như hiển thị bên dưới.

const myComponentStyle = {
   color: 'blue',
   lineHeight: 10,
   padding: '1.5em',
}

function MyComponent(){

     return <div style={myComponentStyle}> Inline Styled Component</div>

}

Tên thuộc tính của CamelCased

Vì CSS nội tuyến được viết bằng đối tượng JavaScript nên các thuộc tính có hai tên, như  background-color, phải được viết bằng cú pháp viết hoa lạc đà:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Sử dụng  backgroundColor thay vì background-color

Trong hướng dẫn này, bạn đã học cách áp dụng các kiểu nội tuyến với React.js.

Chúc mừng mã hóa !!!

1.05 GEEK