作者：罂粟花的美童鞋 | 来源：互联网 | 2023-09-07 09:30
理論學習 + demo產出
class ProductCategoryRow extends React.Component {
render() {
return (| {this.props.category} |
|---|
);
}
}
class ProductRow extends React.Component {
render() {
var name = this.props.product.stocked ?
this.props.product.name :
{this.props.product.name}
;
return (
{name} |
{this.props.product.price} |
);
}
}
class ProductTable extends React.Component {
render() {
var rows = [];
var lastCategory = null;
console.log(this.props.inStockOnly)
this.props.products.forEach((product) => {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push();
}
rows.push();
lastCategory = product.category;
});
return (
);
}
}
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
this.handleInStockInputChange = this.handleInStockInputChange.bind(this);
}
handleFilterTextInputChange(e) {
this.props.onFilterTextInput(e.target.value);
}
handleInStockInputChange(e) {
this.props.onInStockInput(e.target.checked);
}
render() {
return (
type="text"
placeholder="Search..."
value={this.props.filterText}
OnChange={this.handleFilterTextInputChange}
/>
type="checkbox"
checked={this.props.inStockOnly}
OnChange={this.handleInStockInputChange}
/>
{' '}
Only show products in stock
);
}
}
class FilterableProductTable extends React.Component {
constructor(props) {
super(props);
this.state = {
filterText: '',
inStockOnly: false
}; this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
this.handleInStockInput = this.handleInStockInput.bind(this);
}
handleFilterTextInput(filterText) {
this.setState({
filterText: filterText
});
}
handleInStockInput(inStockOnly) {
this.setState({
inStockOnly: inStockOnly
})
}
render() {
return (
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
OnFilterTextInput={this.handleFilterTextInput}
OnInStockInput={this.handleInStockInput}
/>
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
);
}
}
var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
ReactDOM.render(
,
document.getElementById('container')
);
class CommentList extends React.Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.state = {
// "DataSource" 就是全局的數據源
comments: DataSource.getComments()
};
}
componentDidMount() {
// 增加事宜處置懲罰函數定閱數據
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// 消滅事宜處置懲罰函數
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
// 任何時候數據發作轉變就更新組件
this.setState({
comments: DataSource.getComments()
});
}
render() {
return (
{this.state.comments.map((comment) => (
))}
);
}
}
class BlogPost extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
blogPost: DataSource.getBlogPost(props.id)
};
}
componentDidMount() {
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
blogPost: DataSource.getBlogPost(this.props.id)
});
}
render() {
return ;
}
}
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
// 函數接收一個組件參數……
function withSubscription(WrappedComponent, selectData) {
// ……返回另一個新組件……
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ……注重定閱數據……
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ……運用最新的數據襯着組件
// 注重此處將已有的props屬性傳遞給原組件
return ;
}
};
}
京公网安备 11010802041100号