antd 函数组件_React组件的函数工具

Functional Helpers for React

A work in progress, experimental, library for functional helpers to React components.

partial(Component, partialProps)

function MyComponent (props) {

return

{props.foo}{props.children}

;

}

const Partialed = partial(MyComponent, {

bar: 'bar',

a: 1,

children: [

Hello, world

]

});

render(

My message

);

Returns

Hello, world

My message

partialRight(Component, partialProps)

Same as partial, but (first) partially applied arguments take precedence. Useful for the times you want to guarantee that a component has a property set.

function MyComponent (props) {

return

{props.foo}{props.children}

;

}

const Partialed = partialRight(MyComponent, {

bar: 'bar',

a: 1,

children: [

Hello, world

]

});

render(

My message

);

Returns

My message

Hello, world

memoizeish(Component)

Almost like memoize, but more as a 1-step Markov chain, not with history. Utilizes a smart default shouldComponentUpdate from Omniscient.js.

const Memoized = memoizeish(function MyComponent (props) {

return

{props.foo}

;

});

render();

render(); // not updated

render(); // not updated

wrap(value, [wrapper=identity])

function MyComponent (props) {

return

{props.foo}

;

}

const Section = wrap(MyComponent, function (Comp, props) {

return (

{Comp(props)}

);

});

render(React.createElement(Section, { foo: 'foo' }));

Returns

foo

curry(Component, arity = 1, initialProps = { })

function MyComponent (props) {

return

{props.foo}{props.bar}

;

}

const Curried = curry(MyComponent, 2, { a: 1 });

const Curried2 = Curried({ bar: 'bar' }); // Curry nr. 1

const Curried3 = Curried2({ // Curry nr. 2

baz: 'baz',

bar: 'foo',

a: 42

});

render(React.createElement(Curried3, { foo: 'foo' }));

Returns

With propTypes

Instead of defining the arity yourself you can set required proptypes on your component and automatically define arity. Curried components with proptypes will terminate currying when all required props are provided.

function MyComponent (props) {

return

{props.foo}{props.bar}{props.baz}

;

}

MyComponent.propTypes = {

foo: React.PropTypes.string.isRequired,

bar: React.PropTypes.string.isRequired,

baz: React.PropTypes.string

};

const Curried = curryRight(MyComponent);

const Partial1 = Curried({ foo: 'foo' });

const Partial2 = Partial1({ baz: 'baz' });

const Partial3 = Partial2({ bar: 'bar' });

render(React.createElement(Partial3, { foo: 'override' }));

Returns

curryRight(Component, arity = 1, initialProps = { })

curryRight is to curry as partialRight is to partial. The former passed properties takes precedence of the latter. Useful for the times where you want to be sure that a component has properties set.

function MyComponent (props) {

return

{props.foo}{props.bar}

;

}

const Curried = curryRight(MyComponent, 2, { a: 1 });

const Curried2 = Curried({ bar: 'bar' }); // Curry nr. 1

const Curried3 = Curried2({ // Curry nr. 2

baz: 'baz',

bar: 'foo',

a: 42

});

render(React.createElement(Curried3, { foo: 'foo' }));

Returns

(note the a and bar properties)

With propTypes

Instead of defining the arity yourself you can set required proptypes on your component and automatically define arity. Curried components with proptypes will terminate currying when all required props are provided.

function MyComponent (props) {

return

{props.foo}{props.bar}{props.baz}

;

}

MyComponent.propTypes = {

foo: React.PropTypes.string.isRequired,

bar: React.PropTypes.string.isRequired,

baz: React.PropTypes.string

};

const Curried = curryRight(MyComponent);

const Partial1 = Curried({ foo: 'foo' });

const Partial2 = Partial1({ baz: 'baz' });

const Partial3 = Partial2({ bar: 'bar' });

render(React.createElement(Partial3, { foo: 'override' }));

Returns

(note the foo property)

flow(...components)

function Div (props) {

return

{props.children}

;

}

function Section (props) {

return {props.children};

}

function H1 (props) {

return

{props.children}

;

}

function Italic (props) {

return {props.children};

}

const Composed = flow(Div, Section, H1, Italic);

render(

Hello World!

);

Returns

Hello World!

flowRight(...components)

function Div (props) {

return

{props.children}

;

}

function Section (props) {

return {props.children};

}

function H1 (props) {

return

{props.children}

;

}

function Italic (props) {

return {props.children};

}

const Composed = flowRight(Italic, H1, Section, Div);

render(

Hello World!

);

Returns

Hello World!