表格数据选中查看

父组件：

this.state = {
    updateModalVisible: false,
    stepFormValues: {},
}

<span onClick={() => this.handleSingleModalVisible(true, record)}>
  查看
</span>

handleSingleModalVisible = (flag, record) => {
    this.setState({
      updateModalVisible: !!flag,
      stepFormValues: record || {},
    });
};

const SingleModalMethods = {
  handleSingleModalVisible: this.handleSingleModalVisible,
};

const {SingleModalVisible, stepFormValues} = this.state;

//render中查看组件ViewSingleform

{stepFormValues && Object.keys(stepFormValues).length ? (
  <ViewSingleform
    {...SingleModalMethods}
    SingleModalVisible={SingleModalVisible}
    values={stepFormValues}
  />
) : null}

子组件ViewSingleform：

class ViewSingleform extends Component {
  static defaultProps = {   //默认参数，不能在组件内部修改
    handleUpdate: () => { },
    handleSingleModalVisible: () => { },
    values: {},
  };
    constructor(props) {
    super(props);
    this.state = {
      formVals: {
        code: props.values.code,
        username: props.values.username,
        ....//表格字段
      },
    };
  };

renderFooter = () => {
    const {handleSingleModalVisible, values} = this.props;
    return [
        <Button key="cancel" onClick={() =>handleSingleModalVisible(false, values)}>
        取消
        </Button>,
    ]
}

render() {
    const { SingleModalVisible, handleSingleModalVisible, values } = this.props;
    return (
        <Modal
            destroyOnClose
            title="查看用户"
            visible={SingleModalVisible}
            footer={this.renderFooter()}
            onCancel={() => handleSingleModalVisible(false, values)}
            afterClose={() => handleSingleModalVisible()}
        >
            {this.renderContent(formVals)}  //内容
        </Modal>
    );
}