怎么做网站在里面填字/销售管理软件

常见语法

批量传递props属性

function App1() {return <Greeting firstName="Ben" lastName="Hector" />;
}function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};return <Greeting {...props} />;
}

特殊字符转换

<MyComponent message="&lt;3" /><MyComponent message={'<3'} />

传递字符串

<MyComponent message="hello world" /><MyComponent message={'hello world'} />

默认传递属性值true

//如果你没有给属性传值，它默认为 true
<MyTextBox autocomplete /><MyTextBox autocomplete={true} />

传递控件内的子控件

在包含开始和结束标签的JSX表达式中，标记之间的内容作为特殊的参数传递：props.children

<MyComponent>Hello world!</MyComponent>

MyComponent 的 props.children 值将会直接是 “hello world!”。

循环JSX

function Item(props) {return <li>{props.message}</li>;
}function TodoList() {const todos = ['finish doc', 'submit pr', 'nag dan to review'];return (<ul>{todos.map((message) => <Item key={message} message={message} />)}</ul>);
}

false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染

<div /><div></div><div>{false}</div><div>{null}</div><div>{undefined}</div><div>{true}</div>

变量序列化

如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :

<div>My JavaScript variable is {String(myVariable)}.
</div>

JSX 中动态选择组件

JSX只会在showHeader为true时渲染<Header />组件。

<div>{showHeader && <Header />}<Content />
</div>

下面的代码不会像你预期的那样运行，因为当 props.message 为空数组时，它会打印0:

<div>{props.messages.length &&<MessageList messages={props.messages} />}
</div>

使用 PropTypes 进行类型检查

import PropTypes from 'prop-types';class Greeting extends BaseComponent {render() {return (<h1>Hello, {this.props.name}</h1>);}
}Greeting.propTypes = {name: PropTypes.string
};

// 为属性指定默认值:
Greeting.defaultProps = {name: 'Stranger'
};

MyComponent.propTypes = {// 你可以将属性声明为以下 JS 原生类型optionalArray: PropTypes.array,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol,// 任何可被渲染的元素（包括数字、字符串、子元素或数组）。optionalNode: PropTypes.node,// 一个 React 元素optionalElement: PropTypes.element,// 你也可以在任何 PropTypes 属性后面加上 `isRequired` // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息requiredFunc: PropTypes.func.isRequired,// 任意类型的数据requiredAny: PropTypes.any.isRequired,
};

使用 PropTypes.element 你可以指定只传递一个子代

MyComponent.propTypes = {children: PropTypes.element.isRequired
};

class SayHello extends BaseComponent {constructor(props) {super(props);this.state = {message: 'Hello!'};// 这一行很关键this.handleClick = this.handleClick.bind(this);}handleClick() {alert(this.state.message);}render() {// 由于 `this.handleClick` 已经绑定至实例，因此我们才可以用它来处理点击事件return (<button onClick={this.handleClick}>Say hello</button>);}
}