如何根据选定的值在 React 中渲染组件？

Question

这是我的 App.js，它包含一个下拉菜单。

import React,{useState} from 'react'
import Barchart from './Barchart'
import './barStyle.css';
const App=()=>{
  const[selects,setSelects]=useState(1); 
   function handleChange(e)
   {
     //console.log('clicked');
     const tmp=e.target.value
 // console.log(tmp);
    setSelects(e.target.value);
   }
  // let i=1;
   //const option_map=[Array(6).fill( <option>{i}</option>)];
  
    return (    
      <div >  
       <select value={selects} onChange={(e)=>handleChange(e)}>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       </select> 
       <Barchart selected_val={selects}></Barchart>
       </div> 
            
     );
   }

export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是我通过 props 传递 {selects} 值的组件。

import React,{useState,useEffect} from 'react'
import './barStyle.css';

const Barchart=(props)=>{    
  const sel=props.selected_val;
  console.log(sel);
  const arrayGantt=[Array(sel).fill(<div className='gantt1'></div>)]; 
       
        return (<div>
            <div className='gantt_container'>
            <div className='gantt_main'>
            {arrayGantt.map((num)=>num)}
        </div>
            </div>
            </div>);
    }

export default Barchart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我希望 Array(sel).fill 具有 {Selects} 的值，以便它可以相应地呈现。谁能告诉我如何使用 useEffect 来做到这一点？

What is the issue. Screenshot 1

What I want to happen. Screenshot 2

Answer 1

您可以在useEffect 依赖数组中传递一个变量，以在变量中的值发生变化时呈现函数。

import React,{useState,useEffect} from 'react'
import './barStyle.css';

const Barchart=(props)=>{   
  const {selected_val} = props; 
  const [arrayGantt, setArrayGantt] = useState([]); 

  useEffect(()=>{
    setArrayGantt([Array(selected_val).fill(<div className='gantt1'></div>)])
  }, [selected_val]);
  console.log(selected_val);
      
        return (<div>
            <div className='gantt_container'>
            <div className='gantt_main'>
            {arrayGantt.map((num)=>num)}
        </div>
            </div>
            </div>);
    }

export default Barchart;