React.js props xử lý data
- Bài học này sẽ giúp bạn xử lý dữ liệu truyền vào cho một component.
- Trước tiên ta tạo một nội dung
index.htmlnhư sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
function Member(props){
return(
<div className="member">
<h2>{ props.name }</h2>
<p>Tuổi: { props.age }</p>
</div>
)
};
ReactDOM.render(
<Member name="Nguyễn Văn A" age="25" />,
document.getElementById('member')
);
</script>
</body>
</html>
- Thay vì viết dữ liệu trực tiếp bên trong phần render, ta sẽ tách riêng phần dữ liệu ra một dữ liệu của một đối tượng (data Object).
- Khi này ta cần xử lý lại phần render sao cho có thể lấy được dữ liệu, thao tác rất đơn giản như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
function Member(props){
return(
<div className="member">
<h2>{ props.name }</h2>
<p>Tuổi: { props.age }</p>
</div>
)
};
const info = {
name: 'Nguyễn Văn A',
age: '25'
};
ReactDOM.render(
<Member name={info.name} age={info.age} />,
document.getElementById('member')
);
</script>
</body>
</html>
const infokhai báo giá trị cho một object.info.namelấy giá trịnamecủa object.info.agelấy giá trịagecủa object.
Hiển thị trình duyệt
Nguyễn Văn A
Tuổi: 25
- Ta thấy việc xử lý dữ liệu của một object tương đối đơn giản.
- Tuy nhiên bài này chỉ giới thiệu về truyền dữ liệu trong một component, thực tế thì việc truyền dữ liệu giữa các component nó khác một chút, cùng xem bài học tiếp theo để rõ hơn nhé.