父组件向子组件

父组件

class ParentNode extents React.Component
{
    render()
    {
        return (
            <ChildNode 
                transmitPropertyString="按钮" 
                transmitPropertyObject={id : 1} 
            />
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子组件

```shell
class ChildNode extents React.Component
{
render()
{
return (
<button>
{this.props.transmitPropertyString}-
{this.props.transmitPropertyObject.id}
</button>
)
}
}
### 子组件向父组件

父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class ParentNode extents React.Component
{
transmitEvent(msg)
{
this.setState({
msg : msg
})
}

render()
{
return (
<ChildNode
onTransmitEvent={msg=>this.transmitEvent(msg)}
/>
)
}
}
子组件
class ChildNode extents React.Component 
    {
        // 方式一
        render()
        {
            return (
                <button onClick={() => this.props.onTransmitEvent('Hello World')}>
                    按钮-1
                </button>
            )
        }

        // 方式2
        render()
        {
            return (
                <button onClick={this.onTransmitEventToParent()}>
                    按钮-1
                </button>
            )
        }

        onTransmitEventToParent()
        {
            return () => this.props.onTransmitEvent('Hello World')
        }

        // 方式3
        render()
        {
            return (
                <button onClick={this.onTransmitEventToParent}>
                    按钮-1
                </button>
            )
        }

        onTransmitEventToParent = () => {
            return this.props.onTransmitEvent('Hello World')
        }
    }