1、父子通信
1.1 父-子 props
父组件:
class myPage extends React.Component { render() { return ({/* 子组件 自定义page 是子组件要接受的属性 mypage是要传递的内容*/}我是一个mypage); } }
子组件:
class TabBarComponents extends React.Component { constructor(props) { // 继承父组件 super(props); this.state = { // 接受父组件传的属性 selectedTab: props.page, }; } // 然后使用 this.state.selectedTab 这个值, 这个就是mypage .... }
1.2
子-》父
子组件:将子组件的value值 text 传递给父组件
class Input extends Component { changeTitle(event) { // 子组件调用 父组件通过props传递过来的方法 onChangeText,将要传递的值传进方法 this.props.onChangeText(event) } componentDidMount() { this.props.getParentTab(1) } render() { return (); } }
父组件:
class myPage extends React.Component { constructor(props) { super(props); this.state = {newText: 'default'}; } changeText(event) { this.setState({ newText: event.target.value, }) } getParentTab = (tab) => { console.log(tab) } render() { return (我是一个mypage{this.state.newText} {/* 子组件 */}); } }
子组件通过调用 props.onChangeText 方法,将值传递进来,父组件通过 changeText 方法来接受 传递进来的值。
套路:子组件通过调用 父组件传递的方法 传值。
父组件调用子组件的方法:
父组件
onRef = (ref) => { this.child = ref } addEtcItem = () => { this.child.add(); // 调用子组件的方法 } ....
子组件:
add = () => { // todo }; componentDidMount() { this.props.onRef(this) }
说白了 也是子组件调用父组件的方法,将子组件的this 传递给父组件;
父组件使用this.child = ref 接受传进来的 子组件, 这样 父组件就可以使用 this.child.add() 方法了
2、在标签上写样式的方法
{不要扯了,已经到底了!}
3、input type="file" onchange 获取 e.target
DOM:js: uploadFiles = (e) => { e.persist(); // 不然e.target 为null console.log(e) ....
4、create-react-app 打包部署 homepage
package.json
"homepage": "http://mywebsite.com/relativepath", "homepage": "./" .build/ 这个根据具体部署环境定, 一般 取域名即可