React using React 구성 요소

-1

나는 React 레슨을 해왔지만 지금까지 한 번도 본 적이없는 것은 재사용되는 구성 요소입니다. 예를 들어, 버튼이 있고 버튼을 클릭 할 때마다 div를 생성하려고합니다. 하나의 div를 렌더링하는 것이 유일한 목적 인 React 구성 요소를 사용하여 어떻게 수행 할 것인가? 그리고 해당 버튼은 해당 구성 요소를 사용하여 클릭 할 때마다 div를 페이지에 추가합니다.React using React 구성 요소

출처

2017-12-13 Dale Spiteri

는 I이다 달성하기 성분을 사용 상태인가? – OneNeptune

먼저 반응이 구성 요소를 재사용하는 방식에 대한 일반적인 질문을하고 있습니까? 또는 특정 질문, 버튼을 클릭 할 때 새 div를 렌더링하는 방법은 무엇입니까? – user2167582

나는 그들이 어떻게 작동하는지 일반적으로 묻지 않는다. 구성 요소를 만들 수 있고 DOM으로 렌더링 할 수 있습니다. 나는 당신이 어떻게 컴포넌트를 재사용하고 그것의 새로운 인스턴스를 만들 수 있는지 궁금하다. 내가 득점 웹 앱을 만들고 있고 새로운 플레이어를 추가하고 싶다고 말하는 것. 동일한 구조화 된 div를 사용하고 싶지만 add 플레이어를 클릭 할 때마다 새 플레이어를 추가하고 싶습니다. 추가하는 플레이어를 클릭 할 때마다 div 배열에 플레이어 배열을 매핑 한 다음 개체 배열에 정보를 추가하는 것이 가장 좋은 방법일까요? –

이게 뭔가요?

CustomButton 무국적 구성 요소 (프리젠 테이션)는 방금 소품을 받고 사용 중지 될 수 있으며 텍스트를 변경하고 콜백을 정의 할 수 있습니다. 자체 상태가 없으며 버튼이 필요한 앱 전체에서 재사용 할 수 있습니다.

ButtonSampleApp은 presentional 구성 요소를 사용하여 콜백을 제공 한 다음 해당 콜백을 처리하는 컨테이너 구성 요소입니다. div를 렌더링에 추가하려면. 반응 성분은 ButtonSampleApp 오른쪽 버튼을 가정이

const CustomButton = ({ text, callback, isEnabled }) => { 
 
    return <button onClick={() => callback()} disabled={!isEnabled} type="button">{ text }</button>; 
 
}; 
 

 
class ButtonSampleApp extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     divs: [] 
 
    }; 
 
    } 
 
    onButtonClicked() { 
 
    const { divs } = this.state; 
 
    this.setState({ divs: [...divs, { text: divs.length }] }); 
 
    } 
 
    render() { 
 
    const { max } = this.props; 
 
    const { divs } = this.state; 
 
    return (<div> 
 
     <h1>Click on button to add a max of { max } divs</h1> 
 
     <div> 
 
     { divs && divs.map(({text}) => <div key={text}>{ text }</div>) } 
 
     </div> 
 
     <CustomButton isEnabled={!divs || divs.length < max} text="Add button" callback={() => this.onButtonClicked()} /> 
 
    </div>); 
 
    } 
 
} 
 

 
ReactDOM.render(<ButtonSampleApp max={10} />, document.querySelector('#container'));

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script> 
 
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script> 
 
<div id="container"></div>

출처

2017-12-13 22:06:01 Icepickle

React using React 구성 요소

답변

관련 문제