속성에만 적용되는 각도 지시어와 React 등가물은 무엇인가?

속성에만 적용되는 각도 지시어와 React 등가물은 무엇인가?

예를 들어 다음과 같은 각도로 지시할 수 있다.

angular.module('app')
.directive('classy', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       $el.addClass('stay-classy');
    }
  }
}

그리고 다음과 같이 구현하십시오.

<div classy></div>

대부분의 문서를 읽고 구글링한 후 내가 본 리액션에는 동등한 것이 없는 것 같다.나는 다음과 같은 것을 바라고 있었다.

...
render: function() {
  return (
     <MyComponent classy></MyComponent>
  );
}

내가 놓치고 있었던 그런 가능성이 있을까?기능적으로 유사하지만 다른 등가물이 있는가?아니면 이 질문은 내가 "React way"의 일부를 놓치고 있다는 것을 보여주거나 나는 결코 이것을 하고 싶지 않다.고마워!

앵글과 리액션이 각각 어떤 '막후'를 하고 있는지 생각해 보면 도움이 될 것이다.

각도 예제에서 쓸 때<div classy/></div>DIV 요소를 렌더링한 다음 DIV 요소에 의해 정의된 동작을 연결하십시오.classy지시의

반응 예제에서 쓸 때<MyComponent classy></MyComponent>"MyComponent의 인스턴스를 만들고 소품을 전달하십시오.{ classy: true }. 트랜스필러(Babel 또는 what have you)는 그것을 다음과 같은 자바스크립트로 변환할 것이다.

React.createElement(MyComponent, { classy: true });

그래서 당신의 질문에 대한 답은 글을 쓸 수 없다는 것이다.<MyComponent classy></MyComponent>때문에MyComponent구성 요소가 이 시스템을 사용하여 무엇을 해야 할지 알 수 없음classy소품. 리액션에서 당신은 대신 다음과 같은 글을 쓸 수 있다.

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

이건 우리가 알고 있기 때문에 효과가 있다.React.DOM.div구성 요소(대부분의 DOM 구성 요소와 유사)는className받침대

반응 0.14 이후 우리는 이와 같은 것을 보다 간단하게 표현할 수 있는데, "순수" 상태 비저장 기능 요소로서, 즉 소품을 받아들이고 렌더링된 결과를 반환하는 기능이다.

function AlsoClassyDiv(props) {
  const { className, ...rest } = props;
  return <div className={`${className || ''} stay-classy`} {...rest}/>;
};

아래 조각에서 두 가지 접근 방법을 모두 볼 수 있다.

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

function AlsoClassyDiv({ className, ...props }) {
  return <div className={`${className || ''} stay-classy`} {...props}/>;
};

ReactDOM.render(
  <div id="container">
    <div>Regular div</div>
    <ClassyDiv>ClassyDiv!</ClassyDiv>
    <AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv>
  </div>,
  document.body
);

.stay-classy { font: bold 3em Helvetica; text-shadow: 4px 4px 2px #aaa; }

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

유사한 동작을 구현할 수 있는 한 가지 방법은 클래스 믹스 반응(React class mixins를 사용하는 것이다.

각도에서 유용한 지시의 좋은 예는 다음과 같다.

<a href="#target" class="smooth-scroll">Target</a> 

smoothScroll 지시어는 클릭 이벤트를 가로챈 다음 윈도우 스크롤 또는 jquery 스크롤을 사용하여 모든 종류의 애니메이션을 적용한다.

html의 어느 곳에서도 명령어 전원 클래스 이름을 사용할 수 있다.

반응에서는 이런 종류의 것을 사용할 수 없다.반응에서 이 작업을 수행하려면 다음 대신 사용할 특수 링크 구성 요소를 생성하십시오.

<a> like ASmooth....

내 친구 좀 봐. 내가 널 잘 못 구해줬는데 짧은 이야기야, 각진 이야기야.JS 지시는 사실 하나의 구성요소다.따라서 각도Js 지시의 이면에 있는 아이디어는 자체적인 범위 데이터와 그것을 조작하는 자체적인 방법을 가진 구성 요소를 만드는 것이다.나는 너와 같은 방식으로 생각하고 있었는데 여기서 너의 게시물을 찾았고 그것에 대한 답을 찾을 수 없었어.하지만 실무 경험에 감사해, 생각해 보고 어떻게 해야 할지 알고 있어.

목록에 있는 각 링크 항목의 편집 버튼을 추가하여 각 링크 항목의 편집 양식만 전환하여 각 ListItem이 독립 실행형 구성 요소가 되도록 각 링크 항목의 편집 상태를 설정 및 해제하고 싶었어.

스타일이나 컴포넌트를 가지고 놀기 위한 지시 시스템을 재현할 방법을 찾고 있었다.

자식과 함께 재생할 구성 요소를 만든 다음 다음을 렌더링하십시오.

function TextCenter(props) {

  // Iterates over children and clone it with custom props
  const children = React.Children.map(
    props.children,
    (child) => React.cloneElement(child, { className: 'text-center' }
  )

  // Render the children
  return <>{children}</>;
}

function MyComponent() {
  return (
    <TextCenter>
      <div>
        <h1>Hello centered world</h1>
        <p>Yessss</p>
      </div>
    </TextCenter>
  )
}

다음은 응답 텍스트 정렬에 대한 보다 강력한 예:

interface Props extends Breakpoints<'start' | 'center' | 'end'>{}

export const TextAlign: FunctionComponent<Props> = (props) => {
  const className = generateClassName('text', props);
  const children = React.Children.map(props.children, child => React.cloneElement(child as ReactElement, { className }))

  return (
    <>
      {children}
    </>
  )
}

export const MyComponent: FunctionComponent<Props> = (props) => {
  return (
    <div>
      <TextCenter xs="center" md="start">
        <h1>I am centered on mobile but not on desktop</h1>
      </TextCenter>
    </div>
  )
}

이 해결책에는 두 가지 문제가 있는데, 아이들이 구성 요소일 때는 반드시 소품도 가지고 있어야 한다.className그리고 그것은 또한 계층의 수준을 추가하기 때문에 HTML을 덜 깨끗하게 만든다.

참조URL: https://stackoverflow.com/questions/30408586/what-is-the-react-equivalent-of-an-angular-directive-that-only-works-on-attribut