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.html như sau:
HTML:
<!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:
HTML:
<!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ộtobject.info.namelấy giá trịnamecủaobject.info.agelấy giá trịagecủaobject.
- 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é.
