Câu hỏi: MMA301 Phát triển ứng dụng di động đa nền tảng – Bộ ôn tập thi lại số 1

Đáp án đúng: "const Button = styled.TouchableOpacity` background-color: ${props => props.primary ? 'blue' : 'red'};". Trong styled-components, template literal có thể chứa nội suy (interpolation) đặt trong cặp dấu đô la và ngoặc nhọn; nếu thứ được nội suy là một hàm thì thư viện gọi hàm đó với props hiện tại mỗi lần render, nên props.primary bằng true cho 'blue', bằng false cho 'red', và giá trị được chèn vào thuộc tính background-color. "const Button = styled.TouchableOpacity` background-color: props.primary ? 'blue' : 'red';" sai vì biểu thức nằm trần trong chuỗi CSS, không được bọc nội suy, nên JavaScript không đánh giá nó và CSS nhận về một giá trị vô nghĩa. "

<Button style={
  {
    backgroundColor: primary ? 'blue' : 'red'
  }
}
/>

" là inline style thông thường chứ không phải cú pháp styled-components, và biến primary ở đó cũng không lấy từ props. "<Button primaryColor /> " chỉ truyền một prop boolean tên primaryColor, không định nghĩa màu nào cho nút.

Đáp án đúng: "const MyComponent = () => <View><Text>Hello</Text></View>;". Function Component là hàm JavaScript trả về JSX; arrow function viết gọn có thể trả JSX trực tiếp mà không cần return. Trong React Native, chuỗi chữ phải nằm trong Text, còn View làm khung bố cục bọc ngoài, nên mẫu này vừa đúng cú pháp vừa có đủ View và Text như yêu cầu. "

class MyComponent extends React.Component {
  render() {
    return <Text>Hello</Text>;
  }
}

" sai vì đây là Class Component chứ không phải Function Component, lại chỉ có Text mà không có View. "const MyComponent = () => { return <Text>Hello</Text>; };" là Function Component hợp lệ nhưng chỉ trả về Text, thiếu View nên không đạt yêu cầu bố cục có cả hai. "function MyComponent() { return <View>Hello</View>; }" sai vì đặt chuỗi Hello trực tiếp trong View; React Native báo lỗi "Text strings must be rendered within a <Text> component".