react 常见api 使用（长期更新）

2021-05-13 22:52:15 阅读：106 来源： 互联网

标签：传递调用更新 react api extends props 组件方法

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/  这个根据具体部署环境定， 一般 取域名即可

标签：传递,调用,更新,react,api,extends,props,组件,方法
来源： https://blog.51cto.com/u_15200634/2774430

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9