共有状態をツリー上に持ち上げる

Question

ユーザーが肉製品を選択すると、uiはjsonデータファイルからその肉のカテゴリを表示する小さなReactアプリケーションを構築しようとしています。私はクラスProductCategoryRowとSelectProduct関数の親としてProductsクラスを持っています。 Productsクラスで状態を設定し、その小道具をProductCategoryRowとSelectProductに渡す方法について少し混乱します。事前

Answer 1

で

function SelectProduct (props) { 
const products = ['All', 'Beef', 'Lamb', 'Poultry']; 
return (
<ul className='products'> 
{products.map(function (prod) { 
    return (
     <li 
     style={prod === props.selectedProduct ? { color: '#d0021b' }:null} 
       onClick={props.onSelect.bind(null, prod)} 
       key={prod}> 
       {prod} 
      </li> 
     ) 
    })} 
</ul> 
)}; 

class ProductCategoryRow extends React.Component { 
constructor(props) { 
super(props); 

this.state = { 
    list: list, 
}; 
this.onDismiss = this.onDismiss.bind(this); 
} 

onDismiss(id) { 
    const isNotId = item => item.objectID !== id; 
    const updatedList = this.state.list.filter(isNotId); 
    this.setState({ list: updatedList }); 
} 

render() { 
    return (
     <div className="container"> 
      { this.state.list.map(item => 
      <div key={item.objectID} className="product-category-row"> 
         <div>{item.category}</div> 
         <div>{item.meatCut}</div> 
         <div>{item.cooking}</div> 
         <div>{item.price}</div> 
         <div> 
          <button 
          onClick={() => this.onDismiss(item.objectID)} 
          type="button" 
          > 
          Dismiss 
          </button> 
         </div> 
       </div> 
      )} 
     </div> 
    ) 
} 
} 

SelectProduct.propTypes = { 
selectedProduct: PropTypes.string.isRequired, 
onSelect: PropTypes.func.isRequired, 
} 

class Products extends React.Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     selectedProduct: 'All', 
     lists: null 
    }; 
    this.updateProduct = this.updateProduct.bind(this); 
} 

componentDidMount() { 
    this.updateProduct(this.state.selectedProduct); 
} 

updateProduct(prod) { 
    this.setState(function() { 
     return { 
      selectedProduct: prod, 
      lists: null 
     } 
    }) 
} 

render() { 
    return (
     <div> 
      <SelectProduct 
      selectedProduct={this.state.selectedProduct} 
      onSelect={this.updateProduct} 
      /> 
      <ProductCategoryRow /> 
     </div> 
    ) 
} 
} 

export default Products; 

おかげで、製品を選択したときには、すでにあなたの親コンポーネントの状態を更新しているので、それは良いです！すでにupdateProductバックSelectProduct` `から渡された` prod`であなたの状態を更新しているよう

function SelectProduct (props) { 
const products = ['All', 'Beef', 'Lamb', 'Poultry']; 
return (
<ul className='products'> 
{products.map(function (prod) { 
    return (
     <li 
     style={prod === props.selectedProduct ? { color: '#d0021b' }:null} 
       onClick={props.onSelect.bind(null, prod)} 
       key={prod}> 
       {prod} 
      </li> 
     ) 
    })} 
</ul> 
)}; 

class ProductCategoryRow extends React.Component { 
constructor(props) { 
super(props); 

this.state = { 
    list: list, 
}; 
this.onDismiss = this.onDismiss.bind(this); 
} 

onDismiss(id) { 
    const isNotId = item => item.objectID !== id; 
    const updatedList = this.state.list.filter(isNotId); 
    this.setState({ list: updatedList }); 
} 

render() { 
    return (
     <div className="container"> 
      { this.state.list.map(item => 
      <div key={item.objectID} className="product-category-row"> 
         <div>{item.category}</div> 
         <div>{item.meatCut}</div> 
         <div>{item.cooking}</div> 
         <div>{item.price}</div> 
         <div> 
          <button 
          onClick={() => this.onDismiss(item.objectID)} 
          type="button" 
          > 
          Dismiss 
          </button> 
         </div> 
       </div> 
      )} 
     </div> 
    ) 
} 
} 

SelectProduct.propTypes = { 
selectedProduct: PropTypes.string.isRequired, 
onSelect: PropTypes.func.isRequired, 
} 

class Products extends React.Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     selectedProduct: 'All', 
     lists: null 
    }; 
    this.updateProduct = this.updateProduct.bind(this); 
} 

componentDidMount() { 
    this.updateProduct(this.state.selectedProduct); 
} 

updateProduct(prod) { 
    this.setState(function() { 
     return { 
      selectedProduct: prod, 
      lists: null 
     } 
    }) 
} 

render() { 
    return (
     <div> 
      <SelectProduct 
      selectedProduct={this.state.selectedProduct} 
      onSelect={this.updateProduct} 
      /> 
      <ProductCategoryRow selectedProduct={this.state.selectedProduct} /> 
     </div> 
    ) 
} 
} 

export default Products;