React에서 요소 표시 또는 숨기기
React.js를 처음으로 엉망으로 클릭 이벤트를 통해 페이지에서 무언가를 표시하거나 숨기는 방법을 찾을 수 없습니다. 다른 라이브러리를 페이지에로드하지 않으므로 React 라이브러리를 사용하여 기본 방법을 찾고 있습니다. 이것이 내가 지금까지 가진 것입니다. 클릭 이벤트가 발생하면 결과 div를 표시하고 싶습니다.
var Search= React.createClass({
handleClick: function (event) {
console.log(this.prop);
},
render: function () {
return (
<div className="date-range">
<input type="submit" value="Search" onClick={this.handleClick} />
</div>
);
}
});
var Results = React.createClass({
render: function () {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
React.renderComponent(<Search /> , document.body);
핵심은를 사용하여 클릭 핸들러에서 구성 요소의 상태를 업데이트하는 것 setState입니다. 상태 변경이 적용되면 render새로운 상태로 메소드가 다시 호출됩니다.
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div><style type="text/css">
.hidden { display:none; }
</style>
render: function() {
return (
<div className={this.props.shouldHide ? 'hidden' : ''}>
This will be hidden if you set <tt>props.shouldHide</tt>
to something truthy.
</div>
);
}
// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>
삼항 연산자에 대한 대체 구문은 다음과 같습니다.
{ this.state.showMyComponent ? <MyComponent /> : null }
다음과 같습니다.
{ this.state.showMyComponent && <MyComponent /> }
또한 대체 구문 display: 'none';
<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />
그러나을 과도하게 사용 display: 'none'하면 DOM 오염이 발생하여 결국 응용 프로그램 속도가 느려집니다.
다음은 ES6을 사용하는 접근법입니다. 수락 된 답변은 정확하지만 상당히 구식입니다.
import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';
class ToggleBox extends Component {
constructor(props) {
super(props);
this.state = {
// toggle box is closed initially
isOpened: false,
};
// http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
this.toggleBox = this.toggleBox.bind(this);
}
toggleBox() {
this.setState(oldState => ({ isOpened: !oldState.isOpened }));
}
render() {
const { title, children } = this.props;
const { isOpened } = this.state;
return (
<div className="box">
<div className="boxTitle" onClick={this.toggleBox}>
{title}
</div>
{isOpened && children && (
<div className="boxContent">
{children}
</div>
)}
</div>
);
}
}
ReactDOM.render((
<ToggleBox title="Click me">
<div>Some content</div>
</ToggleBox>
), document.getElementById('app'));
데모 : http://jsfiddle.net/kb3gN/16688/
로 일부 CSS 클래스를 추가하는 대신 필요한 경우에만 일부 요소를 렌더링하는 것이 좋습니다 display: none. set display: none-element가 여전히 react에 의해 렌더링되고 추가되는 경우 DOM-성능에 나쁜 영향을 줄 수 있습니다.
모든 탭에 많은 내용이 있고 한 번에 하나의 탭만 열리는 탭이있는 페이지가 있다고 가정하십시오. DOM표시되어야 할 요소 만 유지하는 것이 훨씬 좋습니다 .
위의 코드에서 이것을 달성하기 위해 다음과 같은 코드를 사용하고 있습니다.
{opened && <SomeElement />}
사실 일 SomeElement경우에만 렌더링 됩니다 opened. JavaScript가 논리 조건을 해결하는 방식 때문에 작동합니다.
true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise
최신 버전의 0.11 반응으로 콘텐츠가 렌더링되지 않도록 null을 반환 할 수도 있습니다.
나는 당신을 위해 이것을 처리하는 작은 구성 요소를 만들었습니다 : react-toggle-display
또는 props 를 display: none !important기반으로 스타일 속성을 설정합니다 .hideshow
사용법 예 :
var ToggleDisplay = require('react-toggle-display');
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
<ToggleDisplay show={this.state.showResults}>
<Results />
</ToggleDisplay>
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
React.renderComponent(<Search />, document.body);
상태 (예 : 'show)'에서 부울 값을 설정 한 후 다음을 수행하십시오.
var style = {};
if (!this.state.show) {
style.display = 'none'
}
return <div style={style}>...</div>
이미 몇 가지 훌륭한 답변이 있지만, 나는 그들이 잘 설명되지 않았다고 생각하며 주어진 방법 중 일부는 사람들을 여행 할 수있는 문제를 포함하고 있습니다. 이 작업을 수행하고 장단점을 설명하는 세 가지 주요 방법 (한 가지 주제 이외의 옵션)을 살펴 보겠습니다. 옵션 1을 많이 권장하고 올바르게 사용하지 않으면 해당 옵션에 많은 잠재적 인 문제가 있기 때문에 주로 이것을 쓰고 있습니다.
옵션 1 : 부모의 조건부 렌더링.
구성 요소를 한 번만 렌더링하고 거기에 두지 않는 한이 방법이 마음에 들지 않습니다. 문제는 가시성을 토글 할 때마다 구성 요소를 처음부터 새로 작성하도록하는 반응입니다. 다음은 그 예입니다. 부모 LoginControl에서 LogoutButton 또는 LoginButton이 조건부로 렌더링됩니다. 이것을 실행하면 각 버튼 클릭마다 생성자가 호출되는 것을 알 수 있습니다. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
이제 React는 컴포넌트를 처음부터 매우 빠르게 생성합니다. 그러나 코드를 작성할 때 여전히 코드를 호출해야합니다. 따라서 생성자, componentDidMount, 렌더링 등의 코드가 비싸면 구성 요소 표시 속도가 크게 느려집니다. 또한 숨겨져있을 때 상태를 유지하고 표시 할 때 복원하려는 상태 저장 구성 요소에는이 기능을 사용할 수 없습니다. 한 가지 장점은 숨겨진 구성 요소를 선택할 때까지 전혀 만들지 않는다는 것입니다. 따라서 숨겨진 구성 요소는 초기 페이지로드를 지연시키지 않습니다. 전환 할 때 상태 저장 구성 요소를 재설정하려는 경우도 있습니다. 어떤 경우에는 이것이 최선의 선택입니다.
옵션 2 : 자식의 조건부 렌더링
두 구성 요소가 한 번 생성됩니다. 그런 다음 구성 요소가 숨겨져 있으면 나머지 렌더링 코드를 단락시킵니다. visible prop을 사용하여 다른 방법으로 다른 로직을 단락시킬 수도 있습니다. 코드 펜 페이지에서 console.log를 확인하십시오. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
<LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
<LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
if(!this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
if(this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
이제 초기화 로직이 빠르며 자식이 상태 비 저장 인 경우 성능이나 기능에 차이가 없습니다. 그러나 왜 React가 모든 토글마다 새로운 구성 요소를 만들게합니까? 그러나 초기화 비용이 비싸면 구성 요소를 전환 할 때마다 옵션 1이 실행되어 페이지 전환 속도가 느려집니다. 옵션 2는 첫 페이지로드시 모든 구성 요소의 init를 실행합니다. 첫로드를 느리게합니다. 다시 참고해야합니다. 조건에 따라 구성 요소를 한 번만 표시하고 전환하지 않거나 toggledm 일 때 재설정하려는 경우 옵션 1이 적합하고 아마도 가장 좋은 옵션 일 것입니다.
그러나 느린 페이지로드가 문제인 경우 수명주기 방법에 값 비싼 코드가 있으며 일반적으로 좋은 생각이 아닙니다. 고가의 코드를 라이프 사이클 메소드에서 제거하여 페이지로드 속도가 느려질 수 있습니다. ComponentDidMount에 의해 시작된 비동기 함수로 이동하고 콜백이 setState ()를 사용하여 상태 변수에 넣도록합니다. 상태 변수가 null이고 구성 요소가 표시되면 render 함수가 자리 표시자를 반환하도록합니다. 그렇지 않으면 데이터를 렌더링하십시오. 이렇게하면 페이지가 빠르게로드되고 탭이로드 될 때 채워집니다. 논리를 부모로 이동하고 결과를 자식으로 소품으로 푸시 할 수도 있습니다. 이렇게하면 먼저로드 할 탭의 우선 순위를 지정할 수 있습니다. 또는 결과를 캐시하고 구성 요소가 처음 표시 될 때만 로직을 실행하십시오.
옵션 3 : 수업 숨기기
클래스 숨기기는 아마도 구현하기 가장 쉬운 방법 일 것입니다. 언급했듯이 display : none으로 CSS 클래스를 만들고 prop를 기반으로 클래스를 할당하십시오. 단점은 모든 숨겨진 구성 요소의 전체 코드가 호출되고 모든 숨겨진 구성 요소가 DOM에 첨부됩니다. (옵션 1은 숨겨진 컴포넌트를 전혀 생성하지 않습니다. 그리고 옵션 2는 컴포넌트가 숨겨진 경우 불필요한 코드를 단락시키고 DOM에서 컴포넌트를 완전히 제거합니다.) 다른 답변이지만 말할 수는 없습니다.
옵션 4 : 하나의 구성 요소이지만 소품을 변경하십시오. 또는 구성 요소가 전혀없고 HTML을 캐시 할 수도 있습니다.
이것은 모든 응용 프로그램에서 작동하지는 않으며 구성 요소를 숨기는 것이 아니기 때문에 주제가 아닙니다. 숨기는 것보다 일부 사용 사례의 경우 더 나은 솔루션 일 수 있습니다. 탭이 있다고 가정 해 봅시다. 하나의 React Component를 작성하고 props를 사용하여 탭에 표시되는 내용을 변경할 수 있습니다. JSX를 상태 변수에 저장하고 소품을 사용하여 렌더링 함수에서 반환 할 JSX를 결정할 수도 있습니다. JSX를 생성해야하는 경우이를 수행하고이를 상위에 캐시하고 올바른 것을 소품으로 보냅니다. 또는 자식에서 생성하여 자식 상태로 캐시하고 props를 사용하여 활성 상태를 선택하십시오.
이것은 가상 DOM을 사용하는 좋은 방법입니다.
반응 :
var Comp = React.createClass({
getInitialState: function(){
return {hide: false};
},
toggle: function(){
this.setState({hide: !this.state.hide});
},
render: function() {
return <div>
<button onClick={this.toggle}>toggle</button>
<div className={'hide-' + this.state.hide}>Hi there</div>
</div>;
}
});
ReactDOM.render(
<Comp />,
document.getElementById('container')
);
CSS
.hide-true {
display: none;
}
여기에 바이올린
모범 사례는 설명서에 따라 다음과 같습니다.
{this.state.showFooter && <Footer />}
상태가 유효한 경우에만 요소를 렌더링하십시오.
class FormPage extends React.Component{
constructor(props){
super(props);
this.state = {
hidediv: false
}
}
handleClick = (){
this.setState({
hidediv: true
});
}
render(){
return(
<div>
<div className="date-range" hidden = {this.state.hidediv}>
<input type="submit" value="Search" onClick={this.handleClick} />
</div>
<div id="results" className="search-results" hidden = {!this.state.hidediv}>
Some Results
</div>
</div>
);
}
}
구성 요소 표시를 전환하는 방법을 보려면이 바이올린을 확인하십시오.
http://jsfiddle.net/mnoster/kb3gN/16387/
var Search = React.createClass({
getInitialState: function() {
return {
shouldHide:false
};
},
onClick: function() {
console.log("onclick");
if(!this.state.shouldHide){
this.setState({
shouldHide: true
})
}else{
this.setState({
shouldHide: false
})
}
},
render: function() {
return (
<div>
<button onClick={this.onClick}>click me</button>
<p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
나는 React 팀 에서이 진술로 시작합니다.
React에서는 필요한 동작을 캡슐화하는 고유 한 구성 요소를 만들 수 있습니다. 그런 다음 응용 프로그램의 상태에 따라 일부만 렌더링 할 수 있습니다.
React의 조건부 렌더링은 JavaScript에서 조건이 작동하는 것과 같은 방식으로 작동합니다. if 또는 조건부 연산자와 같은 JavaScript 연산자를 사용하여 현재 상태를 나타내는 요소를 작성하고 React가 UI를 업데이트하여 일치하도록하십시오.
버튼을 클릭 할 때 기본적으로 구성 요소를 표시해야합니다. 순수한 React 또는 CSS를 사용하여, 순수 React 방식을 사용하여 두 가지 방법으로 할 수 있습니다. 경우에 따라 아래 코드와 같은 것을 수행 할 수 있으므로 첫 번째 실행에서 결과 로 표시되지 않는 hideResults것입니다 true만, 버튼, 상태거야 변경을 클릭하여하고 hideResults있다 false및 새 값 조건을 다시 렌더링 구성 요소 GET은,이 반응에 구성 요소 뷰를 변경하는 매우 일반적인 사용하는 것입니다 ...
var Search = React.createClass({
getInitialState: function() {
return { hideResults: true };
},
handleClick: function() {
this.setState({ hideResults: false });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.handleClick} />
{ !this.state.hideResults && <Results /> }
</div> );
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>);
}
});
ReactDOM.render(<Search />, document.body);
React에서 조건부 렌더링에 대해 더 연구하고 싶다면 여기를 살펴 보십시오 .
어떤 경우에는 고차 컴포넌트가 유용 할 수 있습니다.
고차 부품 생성 :
export var HidableComponent = (ComposedComponent) => class extends React.Component {
render() {
if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
return null;
return <ComposedComponent {...this.props} />;
}
};
자신의 구성 요소를 확장하십시오.
export const MyComp= HidableComponent(MyCompBasic);
그런 다음 다음과 같이 사용할 수 있습니다.
<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />
이것은 약간의 상용구를 줄이고 이름 지정 규칙을 고수하지만 MyComp는 여전히 인스턴스화 될 것입니다. 생략하는 방법은 앞에서 언급했습니다.
{ !hidden && <MyComp ... /> }
부트 스트랩 4를 사용하면 그런 식으로 요소를 숨길 수 있습니다
className={this.state.hideElement ? "invisible" : "visible"}
이것은 또한 이렇게 달성 할 수 있습니다 (매우 쉬운 방법)
class app extends Component {
state = {
show: false
};
toggle= () => {
var res = this.state.show;
this.setState({ show: !res });
};
render() {
return(
<button onClick={ this.toggle }> Toggle </button>
{
this.state.show ? (<div> HELLO </div>) : null
}
);
}
사용 RC-경우 - 다른 모듈
npm install --save rc-if-else
import React from 'react';
import { If } from 'rc-if-else';
class App extends React.Component {
render() {
return (
<If condition={this.props.showResult}>
Some Results
</If>
);
}
}
이 간결하고 짧은 구문을 사용하십시오.
{ this.state.show && <MyCustomComponent /> }
ref 사용 및 CSS 조작
한 가지 방법은 React를 ref사용하고 브라우저의 API를 사용하여 CSS 클래스를 조작하는 것입니다. 버튼 클릭으로 DOM 요소를 숨기거나 표시하는 것이 유일한 목적이라면 React에서 다시 렌더링하는 것을 피하는 것이 좋습니다.
// Parent.jsx
import React, { Component } from 'react'
export default class Parent extends Component {
constructor () {
this.childContainer = React.createRef()
}
toggleChild = () => {
this.childContainer.current.classList.toggle('hidden')
}
render () {
return (
...
<button onClick={this.toggleChild}>Toggle Child</button>
<div ref={this.childContainer}>
<SomeChildComponent/>
</div>
...
);
}
}
// styles.css
.hidden {
display: none;
}
추신 : 내가 틀렸다면 나를 정정하십시오. :)
이 예는 1 초마다 전환되는 토글을 사용하여 구성 요소간에 전환하는 방법을 보여줍니다.
import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Component1 = () =>(
<div>
<img
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
</div>
)
const Component2 = () => {
return (
<div>
<img
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px-
12ccse.jpg" />
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
toggleFlag:false
}
}
timer=()=> {
this.setState({toggleFlag:!this.state.toggleFlag})
}
componentDidMount() {
setInterval(this.timer, 1000);
}
render(){
let { toggleFlag} = this.state
return (
<Fragment>
{toggleFlag ? <Component1 /> : <Component2 />}
</Fragment>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
당신은 CSS 파일을 사용할 수 있습니다
var Results = React.createClass({
render: function() {
return (
<div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
Some Results
</div>
);
}
})
그리고 CSS 파일에서
.search-results {
...
display: none
&.show {
display: block
}
}
var Search= React.createClass({
getInitialState: () => { showResults: false },
onClick: () => this.setState({ showResults: true }),
render: function () {
const { showResults } = this.state;
return (
<div className="date-range">
<input type="submit" value="Search" onClick={this.handleClick} />
{showResults && <Results />}
</div>
);
}
});
var Results = React.createClass({
render: function () {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
React.renderComponent(<Search /> , document.body);
class App extends React.Component {
state = {
show: true
};
showhide = () => {
this.setState({ show: !this.state.show });
};
render() {
return (
<div className="App">
{this.state.show &&
<img src={logo} className="App-logo" alt="logo" />
}
<a onClick={this.showhide}>Show Hide</a>
</div>
);
}
}
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="checkbox" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
<input type="text" />
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>참고 URL : https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react
'Programming' 카테고리의 다른 글
| 파이썬에서 배열을 선언하는 방법? (0) | 2020.02.17 |
|---|---|
| 이 사전 키가 C #에 있는지 어떻게 알 수 있습니까? (0) | 2020.02.17 |
| 쿼리 세트에서 빈 이름 또는 NULL 이름 필터링 (0) | 2020.02.17 |
| 가능하면 항상 병렬 스트림을 사용해야합니까? (0) | 2020.02.17 |
| Tomcat, JBoss 및 Glassfish의 차이점은 무엇입니까? (0) | 2020.02.17 |