jsx,Code片段,代码实例,代码示例,代码片段库

jsx Z偏移使用半径 - Animoplex的After Effects表达

Z偏移使用半径 - Animoplex的After Effects表达

ZOffsetUsingRadius.jsx

// Z Offset Using Radius - Created by Animoplex: www.animoplex.com
// First line is the source of the offset, apply to position value on a grid of shapes

tar = thisComp.layer("TARGET").toWorld([0,0,0]);
rad = 100; // radius
mov = 500; // pixels of movement
dis = length(tar, toWorld([0,0,0]));
end = [value[0], value[1], value[2] + mov];
ease(dis, 0, rad, end, value)

jsx 循环表达式

循环表达式

Loops.jsx

// Loop Expressions

loopOut("cycle", 0) // Repeat from start to finish, default loop mode
loopOut("pingpong", 2) // Loops last three keyframes back and forth
loopOut("offset", 0) // Repeats animation using last keyframe as new start point
loopOut("continue") // Does not loop, but continues onwards with current velocity

// loopOut evaluates from the first keyframe towards the layer outPoint
// loopIn can be substituted to evaluate from layer inPoint towards last keyframe

jsx 下一个/风格的Comoponents

Next.js中的样式化组件实现

_document.jsx

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <html lang="pl">
        <Head>
          <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
          <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

jsx 反应片段

Deleted item

deleteItem(id) {
    this.setState(prevState => ({
      items: prevState.items.filter(item => item.id !== id)
    }));
  
  
  
  You are managing the data in Parent component and rendering the UI in Child component, so to delete item from child component you need to pass a function along with data, call that function from child and pass any unique identifier of list item, inside parent component delete the item using that unique identifier.

Step1: Pass a function from parent component along with data, like this:

<TodoList items={this.state.items} _handleDelete={this.delete.bind(this)}/>
Step2: Define _handleDelete function in parent component like this:

_handleDelete(id){
    this.setState(prevState => ({
        data: prevState.data.filter(el => el != id )
    }));
}
Step3: Call that function from child component using this.props._handleDelete():

jsx 反应级组分-对焦接通状态

Test.js

class Test extends React.Component{
  constructor(){
    super();
    this.state = {toggle:false}
    this.updateToggle = this.updateToggle.bind(this);
  }
  
  updateToggle(flag){
    this.setState({toggle:flag});
  }

  render(){
    return(
      <div>
        <button onClick={()=>this.updateToggle(!this.state.toggle)}>button</button>
        <p>{this.state.toggle ? "on" : "off" }</p>
      </div>
    )
  }
}

jsx 故事书全球装饰

Guide.md

# Caveat
2019/03/06  
currently Global Decorators needed to be in `loadStories` function inside of config.js
> this is not documented anywhere but it is workaround for now  

- [ref1](https://github.com/storybooks/storybook/issues/1844)  
- [ref2(another way)](https://github.com/storybooks/storybook/issues/3246)

[related commit](https://github.com/godon019/Temple-Resource-Management/commit/da69cfcf16705a5989be6c9fe51f4e8282e442a7)
  
.storybook/config.js
```js
//---------------------declare global decorators-----------
const ThemeDecorator = (storyFn) => (
  <ThemeProvider theme={{ debug: true }}>
    {storyFn()}
  </ThemeProvider>
)

const ApolloDecorator = storyFn => (
  <ApolloWrapper>
    {storyFn()}
  </ApolloWrapper>
)
//----------------------------------------------------

const req = require.context('../src', true, /.stories.js$/);

function loadStories() {
  //implement Global Decorators here
  //For debug
\!h  addDecorator(ThemeDecorator);
  //For react router
\!h  addDecorator(StoryRouter())
  //For apollo 'client'
\!h  addDecorator(ApolloDecorator);
  
  req.keys().forEach(filename => req(filename));
}

```
> Note that somehow the auto importing doesn't work under .storybook/config.js so I need to manually import those... it is tedious

---
# deprecated  
somename.stories.js
```jsx
import React from 'react';
import { addDecorator } from '@storybook/react';
import { ThemeProvider} from 'styled-components'

const ThemeDecorator = (storyFn) => (
  <ThemeProvider theme={{ debug: true }}>
    {storyFn()}
  </ThemeProvider>
);
addDecorator(ThemeDecorator);
```
this apply Decorator globally

App.global.stories.jsx

import React from 'react';
import { addDecorator } from '@storybook/react';
import { ThemeProvider} from 'styled-components'
import  StoryRouter  from  'storybook-react-router';
import ApolloWrapper from './setups/apollo/ApolloWrapper';

//For debug
const ThemeDecorator = (storyFn) => (
  <ThemeProvider theme={{ debug: true }}>
    {storyFn()}
  </ThemeProvider>
);
addDecorator(ThemeDecorator);

//For react router
addDecorator(StoryRouter())

//For apollo 'client'
const ApolloDecorator = storyFn => (
  <ApolloWrapper>
    {storyFn()}
  </ApolloWrapper>
)
addDecorator(ApolloDecorator);

jsx 组件链接SDL

component-link

<c:set var="pubID" value="${localization.id}" scope="request"/>
<c:set var="pageID" value="${pageModel.id}" scope="request"/>

<c:set var="idTemplateHeader" scope="request" value="${localization.getConfiguration('core.idTemplateHeader')}"/>
<c:set var="idSeoJoinB2C" scope="request" value="${localization.getConfiguration('core.idSeoJoinB2C')}"/>

<tridion:ComponentLink pageURI="tcm:${pubID}-${pageID}-64" componentURI="tcm:${pubID}-${idSeoJoinB2C}" templateURI="tcm:${pubID}-${idTemplateHeader}-32" linkAttributes="class=&apos;btn btn-link btn-join text-12 text-left text-md-right&apos;" linkText="" textOnFail="false">${lblB2CLink}</tridion:ComponentLink>

// Only URL
<c:set var="linkPrivateMyAccount"><tridion:ComponentLink pageURI="tcm:${pubID}-${pageID}-64" componentURI="tcm:${pubID}-${idSeoPrivateMyAccount}" templateURI="tcm:${pubID}-${idTemplateHeader}-32" textOnFail="false" addAnchor="false" onlyUrl="true"/></c:set>

jsx 模板文字内部JSX卷曲括号

templateLiteralInJSX

<li className="nav-item">
  <a href="#home" onClick={() => props.handlePageChange("Home")} className={`nav-link ${props.currentPage ? "active" : ""}`}>
    Home
  </a>
</li>
<li className="nav-item">
  <a href="#about" onClick={() => props.handlePageChange("About")} className={props.currentPage === "About" ? "nav-link active" : "nav-link"}>
    About
  </a>
</li>

jsx Pupster搜索表单

pupsterSearchForm

<form>
    <label htmlFor="breed-choice">Breed name:</label>
    <input list="breeds" id="breed-choice" name="breed-choice" className="form-control" placeholder="Choose a Breed" />
    <datalist id="breeds">

    </datalist>
    <button type="submit" className="btn btn-success btn-block mt-2">Search</button>
</form>

jsx Pupster Loading Spinner

pupsterLoadingSpinner

<i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />