• props & children


    一、 choosing the type at runtime

    import React from 'react';
    import { PhotoStory, VideoStory } from './stories';
    
    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // Wrong! JSX type can't be an expression.
      return <components[props.storyType] story={props.story} />;
    }

    为了解决这个问题,我们将其赋值给首字母大写的变量

    import React from 'react';
    import { PhotoStory, VideoStory } from './stories';
    
    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // Correct! JSX type can be a capitalized variable.
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={props.story} />;
    }

    二、 props in JSX

    this.props引用属性,属性是不可以由组件自己进行修改,组件的属性是由父组件传递进来的。有多种方法指定JSX的props属性

    2.1  键值对形式

    <HelloWorld propName=propValue />

    propValue可以是字符串,大括号包起来的数字或字符串{},大括号包起来的数组{[]},大括号包起来的一个变量,即时函数

    1)JS表达式

    可以传递任何大括号包裹的JS表达式作为props。

    <MyComponent foo={1 + 2 + 3 + 4} />

    对于MyComponent组件,props.foo属性等于10. if语句和for循环不是JS表达式,因此不能直接用于JSX。

    2)字符串

    可以传递一个字符串作为prop,因此下面的两条语句是等价的。

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

    2.2 prop默认为true

    下面两种表述是等价的

    <MyTextBox autocomplete />
    
    <MyTextBox autocomplete={true} />

    2.3 defaultProps

    可以通过指定defaultProps属性值来指定prop的默认值,这是用在未定义的props上,但是当props值为null时并不起作用:

    class CustomButton extends React.Component {
      // ...
    }
    
    CustomButton.defaultProps = {
      color: 'blue'
    };
    
     render() {
        return <CustomButton /> ; // props.color will be set to blue
      }
    
    render() {
        return <CustomButton color={null} /> ; // props.color will remain null
      }
    class Greeting extends React.Component {
      render() {
        return (
          <h1>Hello, {this.props.name}</h1>
        );
      }
    }
    
    // Specifies the default values for props: 静态属性 类名.属性名
    Greeting.defaultProps = { 
      name: 'Stranger'
    };
    
    // Renders "Hello, Stranger":
    ReactDOM.render(
      <Greeting />,
      document.getElementById('example')
    );

    defaultProps用来确保当父组件没有提供值时,this.props.name仍然能够取到值,propTypes类型检测发生在defaultProps解析之后,所以类型检测也是适应于defaultProps.

    2.3 扩展运算符

    展开对象的形式,使用...+对象名,React自动看成是多个属性名

    var props={
        one:'123',
        two:321
    }
    <HelloWorld {...props}/>

     要经常使用解构赋值

    class FancyCheckbox extends React.Component{
      render() {
        var { checked, title, ...other } = this.props;
        var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
        var fancyTitle = checked ? 'X ' + title : 'O ' + title;
        return (
          <label>
            <input {...other}
              checked={checked}
              className={fancyClass}
              type="checkbox"
            />
            {fancyTitle}
          </label>
        );
      }
    });

    三、children in JSX

    在拥有开闭标签的JSX表达式中,开闭标签之间的内容传递给了props.children属性,你没办法通过 this.props.children 取得当前组件的子元素。 因为this.props.children 返回的是组件拥有者传递给你的 passed onto you 子节点。

    class App extends React.Component{
      componentDidMount() {
        // This doesn't refer to the `span`s! It refers to the children between
        // last line's `<App></App>`, which are undefined.
        console.log(this.props.children);
      }
    
      render() {
        return <div><span/><span/></div>;
      }
    }
    
    ReactDOM.render(<App></App>, mountNode);

    有多种不同的方法来传递children。

    1)字符串

    开闭标签之间可以是字符串,因此props.children就是这个字符串

    <MyComponent>Hello world!</MyComponent>

    在这里props.children=Hello world!

    JSX会移除空格,因此下面的几种表述是等价的:

    <div>Hello World</div>
    
    <div>
      Hello World
    </div>
    
    <div>
      Hello
      World
    </div>
    
    <div>
    
      Hello World
    </div>

    2)JSX children

    你也可以提供更多的JSX元素作为children,这在嵌套组件中很有用:

    <MyContainer>
      <MyFirstComponent />
      <MySecondComponent />
    </MyContainer>

    你可以混合不同类型的children,因此你可以混合使用字符串和JSX children

    <div>
      Here is a list:
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>

    3)javascript children

    可以使用任何大括号括起来的JS表达式作为children,比如下面这两种表述是相同的

    <MyComponent>foo</MyComponent>
    
    <MyComponent>{'foo'}</MyComponent>

    这通常用于呈现JSX任意长度列表,比如下面这种呈现一个HTML列表

    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>
      );
    }

    JS表达式还可以跟其他类型的children一起混用,这通常用于字符串模板

    function Hello(props) {
      return <div>Hello {props.addressee}!</div>;
    }

    4)函数

    props.children可以传递任何数据,比如你有一个custom组件,你可以使用一个回调函数作为props.children.

    function ListOfTenThings() {
      return (
        <Repeat numTimes={10}>
          {(index) => <div key={index}>This is item {index} in the list</div>}
        </Repeat>
      );
    }
    
    // Calls the children callback numTimes to produce a repeated component
    function Repeat(props) {
      let items = [];
      for (let i = 0; i < props.numTimes; i++) {
        items.push(props.children(i));
      }
      return <div>{items}</div>;
    }

    5)booleans,null,undefined are ignored

    false,true,null,undefined都是合法的children,他们只是不渲染,下面这些表达式将渲染成同样的

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

    当需要有条件的渲染某个react组件时,这是很有用的,

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

     一些看起来像是false的值,比如说数字0,是会被React渲染的。比如下面这个例子,可能并不是你想象的结果,当props.message是一个空数组时,仍然会渲染:

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

    要解决这个问题,就要确保&&逻辑运算符前面的表达式是boolean:

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

    相反地,如果你需要在输出中输出false,true,null,undefined这些值,你需要将他们转化为字符串:

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

    谨慎处理props.children

    this.props.children的值有三种可能:如果当前组件没有子节点,他就是undefined;如果有一个子节点,数据类型是object;如果有多个子节点,数据类型就是array。所以处理this.props.children的时候要小心。
    React提供了一个工具方法React.Children来处理this.props.children.

    React.Children.map

    我们可以用React.Children.map来遍历子节点,而不用担心this.props.children的数据类型是undefinde还是object.

    React.Children.map(children, function[(thisArg)])

    在每一个直接子级(包含在 children 参数中的)上调用 function 函数,此函数中的 this 指向 thisArg。如果 children是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 function 中。如果 children 参数是 null 或者undefined,那么返回 null 或者 undefined 而不是一个空对象。

    <script type="text/jsx">
        class NotesList extends React.Conponent{
            render(){
                return(
                    <ol>
                        {
                         React.Children.map(this.props.children,function(child){
                                return <li>{child}</li>;
                            })
                        }
                    </ol>
                );
            }
        }
        React.render(
            <NotesList>
                <span>hello</span>
                <span>world</span>
            </NotesList>,
            document.getElementById('example')
        );
    </script>

    React.Children.forEach

    类似React.Children.map(),只是不会返回array

    React.Children.forEach(children, function[(thisArg)])

    React.Children.count

    返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。

    React.Children.count(children)

    React.Children.only

    返回唯一的子节点,否则报错

    React.Children.only(children)

    React.Children.toArray

    给子节点分配key值,转化为数组形式返回,这个方法在render中操作子节点集合是有用的,尤其是当你想要重新排列或者分割this.props.children时。

    React.Children.toArray(children)

    五、属性和状态对比

    5.1 属性和状态的相似点

    • 都是纯JS对象
    • 都会触发render更新
    • 都具有确定性,给定相同的属性和相同的状态,会有相同的结果

    5.2 属性和状态的不同点

      属性this.props 状态this.state
    能否从父组件获取初始值          能          否
    能否由父组件修改          能          否
    能否在组件内部设置默认值          能          能
    能否在组件内部修改          否          能
    能否设置子组件的初始值          能          否
    能否修改子组件的值          能          否

    状态就是和组件自己相关的,既不和父组件相关也不和子组件相关。

    组件不能修改自己的属性,可以从父组件获得属性,父组件可以修改它的属性,他也可以修改子组件的属性。

    由于this.props和this.state都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,

    this.props 表示那些一旦定义,就不再改变的特性,而 this.state是会随着用户互动而产生变化的特性。

    5.3 简单的区分

    组件在运行时需要修改的数据就是状态。

    比如:用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取.

    文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

  • 相关阅读:
    [Clojure] 包管理器leiningen配置国内镜像仓库
    [Haskell] 为什么列表操作++很昂贵?
    js判断除了空格换行之外是否为空
    iOS上架之隐私信息访问权限(uni-app)
    vue之动态绑定class
    this
    uni-app 上传图片之压缩图片上传
    uniapp无痛刷新token
    jQuery 发送跨域请求(jsonp)
    Document
  • 原文地址:https://www.cnblogs.com/YangqinCao/p/6139480.html
Copyright © 2020-2023  润新知